alphacode alphacode - 1 month ago 6
jQuery Question

Cost center distribution over a key is just working for the first row

I just started with jQuery and have a problem iI couldn't solve:

I'm working on a table which distribute costs to cost-centers over a distribution key. I would like to distribute them for each row. Currently it's just working for the first table row and fills up the rest of the columns/rows with "Not a Number (NaN)".



$(document).ready(function()
{
$("#costtable tbody > tr").each(function()
{
var totalv = $(".total").val();
var keyv = $(".key").val().split(",");

$("#costtable tbody > tr td:not(:first, :nth-child(2), :nth-child(3))").each(function(a){

var keysum = 0;

for (var i = 0; i < keyv.length; i++)
{
keysum += parseFloat(keyv[i]);
}

var sum = parseFloat(totalv/keysum)*keyv[a];
$(this).closest('td').html(sum.toFixed(2));

});
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1" id="costtable">
<thead>
<tr>
<th>Sort</th>
<th>Total</th>
<th>Distr. Key</th>
<th>Living Room</th>
<th>Work</th>
<th>Food</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fruits</td>
<td><input class="total" type="text" value="1300.00"></td>
<td><input class= "key" type="text" value="0,0,2"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Pen</td>
<td><input class="total" type="text" value="1400.00"></td>
<td><input class="key" type="text" value="0,3,0"></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Couch</td>
<td><input class="total" type="text" value="2000.00"></td>
<td><input class="key" type="text" value="1,1,0"></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>





I think the "NaN" issue is caused by $(this).closest('td'), because it's taking affect for all the following "td" tags.

Does anybody have an idea what I'm doing wrong and how I can distribute the costs for each row separately?

Answer

This points out only particular issues but is too much for a comment. 1) With $(".total").val() you select all .total, get the value only of the first and use that for all calculations. 2) Same with $(".key").val(). 3) With $("#costtable tbody > tr") you select all rows in tbody. Inside the .each() you should not repeat that selector but use the keyword this for the row you are actually in.

Change your code to following and try again. If some problems stay post here or update your question.

$(document).ready(function() {
    $("#costtable tbody > tr").each(function() {
        var totalv = $(".total", this).val(); // select only .total in this actual row
        var keyv = $(".key", this).val().split(","); // see above
        // select only the td's of the row you are actually in
        $("td:not(:first, :nth-child(2), :nth-child(3))", this).each(function(a){
            var keysum = 0;
            for (var i = 0; i < keyv.length; i++) keysum += parseFloat(keyv[i]);
            var sum = parseFloat(totalv/keysum)*keyv[a];                    
            $(this).closest('td').html(sum.toFixed(2));
        }); 
    });
});