Как я могу вычислить сумму столбца в динамически новой добавленной строке с помощью javascript?

Question

Я новичок в javascript и cakephp. Я добавил новую строку, используя javascript, и теперь я хочу рассчитать сумму столбца «сумма» всякий раз, когда я заполняю поле суммы. HTML код для добавления нового поля:

<table id="voucher_line" style="width:750px; font-size:13px;"> 
<tr> 
    <th>Others Component</th> 
    <th>Others GoB</th> 
    <th>Amount</th> 
</tr> 
<tr id="voucher_"> 
    <td style="width:150px;"><?php echo $this->Form->input('DebitVoucherLine.0.coa_component_id',array('options'=>$coa_components,'type'=>'select','label'=>false));?></td> 

    <td style="width:150px;"><?php echo $this->Form->input('DebitVoucherLine.0.level_five_id',array('type'=>'select','label'=>false));?></td> 

    <td style="width:204px;"><?php echo $this->Form->input('DebitVoucherLine.0.amount', array('label'=>false, 'type'=>'text'));?></td> 
</tr> 

И JavaScript:

<script type="text/javascript"> 

$(":button#add").click(function() { 
var clonedRow = $("#voucher_line tr:last").clone(); 
var newIndex = (document.getElementById('voucher_line').rows.length-1); 

clonedRow[0].id = 'voucher_' + newIndex; 
$.each($('input, select', clonedRow), function(i, val){ 
    val.name = val.name.replace((newIndex - 1), newIndex); 
    val.id = val.id.replace((newIndex - 1), newIndex); 
    val.value = ''; 
}) 
$("#voucher_line").append(clonedRow); 
}); 

$(":button#remove").click(function(){ 
if ($("#voucher_line tr").length != 2) { 
$("#voucher_line tr:last").remove(); 
} 
}); 

</script> 

Любая помощь будет оценена. Спасибо заранее.

Answer 1

Вы можете перебирать все строки в таблице и вычислять значение. Вот краткий пример:

function calculateTableTotal() { 
    var total = 0; 

    $('#voucher_line tr td input[type="text"]').each(function() { 

    // find the amount input field 
    var $input = $(this); 
    total += parseInt($input.val()); 
    }); 

    alert('The total is : ' + total); 

}