在jQuery中添加多個輸入框的值

Question

我正在使用代碼點火器。 我有一個表格，其中連續包含三個輸入框。 ..我把它們放在小於5的for循環中。所以現在我的窗體有5行，每行有3個輸入框..現在我在寫什么，現在我將兩個輸入框的值相加並顯示在第三個輸入框中..現在我要做的是當每個“總計”（第三個輸入框）都已填充..然后我要添加所有總計，然后在我顯示在底部的最后一個框中顯示所有總計..

這是我的看法

   <td><input type="text" id = "price_<?php echo $i ?>"
                      onkeyup='addition(<?php echo "$i"?>)'>

     </td>

<td> <input type="text" id = "quantity_<?php echo $i ?>" onkeyup='addition(<?php echo "$i"?>)'>
</td>

<td><input type="text"  id = "total_<?php echo $i ?>">
    </td>

 <?php echo form_input($subtotal)?></td> // here i want to display sum of all the totals

這是我的javascript ..此函數是將價格和數量相乘..i表示第一個和第二個輸入框，然后在第三個框中顯示。

  function addition (obj)
     {
var subtotal = 0;
var num1=parseInt($('#price_'+obj).val());
    var num2=parseInt($('#quantity_'+obj).val());
    var num4=parseInt($('#total_'+obj).val());

if ($('#price_'+obj).val() !='' && $('#quantity_'+obj).val() !='')
{
    var num3=num1*num2;
    $('#total_'+obj).val(num3);

} 

else
{
    $('#total_'+obj).val('');
 }


 }

我也上傳了圖片..

Answer 1

這是jsFiddle示例： http : //jsfiddle.net/Ner7M/2/

感興趣的代碼：

var table = $('table');

// nth-child is 1-based, not 0
function totalColumn(table, idx) {
    var total = 0;
    var tds = $('table')
        .find('tr td:nth-child(' + idx + ') input')
        .each(function() {
        total += parseInt($(this).val());
    });
    return total;
}

totalColumn(table, 3);

Answer 2

我看到您使用的是jQuery，我對您的代碼做了一些修改以更好地使用jQuery。 您可以在JsBIN上觀看演示

當您通過計算結果更新一個“總計”單元格時，想法是鎖定所有“總計”單元格。 將所有“總計”單元格與“總計”單元格相加。 我在聽“ keyup”事件。