user2274075 user2274075 - 7 months ago 10
Javascript Question

how to perform calculations on dynamically added table rows in jquery

hi have a form which dynamically adds a table row on a button click but now i want to perform calculations into my table's columns like i have a colum name prevqty, thisqty, qty(which is total qty), rate and amount and i have a total field in which the total of amount is stored i have tried a calculation but it doesnt seems to work

here is my script

$(document).ready(function() {
var currentItem = $('#items').val();

$('#data').on('keyup', '.prevqty, .thisqty, .qty, .rate, .cal', calculateRow);

$('#addnew').click(function() {
currentItem++;
$('#items').val(currentItem);
$('#data').append('<tr>\n\
<td align="center"><input type="text" size="6" maxlength="6" maxlength="6" name="ord_' + currentItem + '" class="form-input-oth" onkeyup="return copy(this.val());"/></td>\n\
<td align="center"><input type="text" size="6" maxlength="6" maxlength="6" name="srno_' + currentItem + '" class="form-input-oth"/></td>\n\
<td align="center"><textarea name="descrip_' + currentItem + '" cols="70" class="form-input-textareasm"></textarea></td>\n\
<td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>\n\
<td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="prevqty_' + currentItem + '" class="prevqty form-input-rate" onkeyup="calculateRow();"//></td>\n\
<td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="thisqty_' + currentItem + '" class="thisqty form-input-rate" onkeyup="calculateRow();"//></td>\n\
<td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="qty_' + currentItem + '" class="qty form-input-rate" onkeyup="calculateRow();"/></td>\n\
<td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="rate_' + currentItem + '" class="rate form-input-rate" onkeyup="calculateRow();"/></td>\n\
<td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="amt_' + currentItem + '" class="cal form-input-amt" onkeyup="calculateRow();"/></td>\n\
</tr>'
);
});

function calculateSum() {
var sum = 0;
$(".cal").each(function () {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#total").val(sum.toFixed(2));
}
function calculateRow() {
var cost = 0;
var $row = $(this).closest("tr");
var prevqty = parseFloat($row.find('.prevqty').val());
var thisqty = parseFloat($row.find('.thisqty').val());
var qty = parseFloat($row.find('.qty').val(prevqty + thisqty));
//parseFloat($row.find('.qty').val());
alert(qty);
if (isNaN(qty)) {
$row.find('.qty').val("0");
} else {
$row.find('.qty').val(qty);
}
// changed the following line to only look within the current row
var rate = parseFloat($row.find('.rate').val());

cost = qty * rate;

if (isNaN(cost)) {
$row.find('.cal').val("0");
} else {
$row.find('.cal').val(cost);
}
calculateSum();
}});


i have a working fiddle here the prevqty and thisqty is working properly but the rate and amounts calculation is not working see here http://jsfiddle.net/rey_kahn/YS4N2/

Answer

Every time your $("#addnew").click event fires you will want to rebind the keyup/calculateRow method. Something like:

$('#addnew').click(function() {
    currentItem++;
    $('#items').val(currentItem);
    $('#data').append('<tr>\n\
        <td align="center"><input type="text" size="6" maxlength="6" maxlength="6" name="ord_' + currentItem + '" class="form-input-oth" onkeyup="return copy(this.val());"/></td>\n\
            <td align="center"><input type="text" size="6" maxlength="6" maxlength="6" name="srno_' + currentItem + '" class="form-input-oth"/></td>\n\
        <td align="center"><textarea name="descrip_' + currentItem + '" cols="70" class="form-input-textareasm"></textarea></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="unit_' + currentItem + '" class="form-input-rate"/></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="prevqty_' + currentItem + '" class="prevqty form-input-rate" onkeyup="calculateRow();"//></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="thisqty_' + currentItem + '" class="thisqty form-input-rate" onkeyup="calculateRow();"//></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="qty_' + currentItem + '" class="qty form-input-rate" onkeyup="calculateRow();"/></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="rate_' + currentItem + '" class="rate form-input-rate" onkeyup="calculateRow();"/></td>\n\
            <td align="center"><input type="text" size="6" maxlength="9" maxlength="6" name="amt_' + currentItem + '" class="cal  form-input-amt" onkeyup="calculateRow();"/></td>\n\
        </tr>'
                     );
    $('#data').off('keyup').on('keyup', '.prevqty, .thisqty, .qty, .rate, .cal', calculateRow);
});

Notice that $("#data").off('keyup').on(... at the end of the event? That should keep your new rows calculating correctly.

UPDATE

After reviewing the code you posted in your jsfiddle comment, I found a few HTML errors but I think the real problem was the way you were setting/calculating qty. Check out this update fiddle: http://jsfiddle.net/YS4N2/1/

There you will see I set the qty input separate from how it is used for the purposes of calculation. This works ok.