使用Javascript計算可變數量的html表列的總和

我有一個包含大量列的表，每列包含一個可更改數值的文本字段。表格的最後一列必須包含所有列的總和。現在，我的問題是：如何使用javascript實時更改總和？例如，如果列值被修改，則必須改變總和以適應新的值。使用Javascript計算可變數量的html表列的總和

下面是我的表：

<table id="sum_table"> 
    <tr> 
    <td>Column 1</td> 
    <td><input type="text" name="val1" value="" /></td> 
    </tr> 
    <tr> 
    <td>Column 2</td> 
    <td><input type="text" name="val2" value="" /></td> 
    </tr> 
    <tr> 
    <td>Column 3</td> 
    <td><input type="text" name="val3" value="" /></td> 
    </tr> 
    [...] 
    <tr> 
    <td>Total</td> 
    <td><input type="text" name="total" value="" /></td> 
    </tr> 
</table>

謝謝。

來源

2011-05-29 Psyche

編輯：

在評論中討論後，這是最後的版本：http://jsfiddle.net/gXdwb/3/

$('#sum_table tr:not(.totalColumn) input:text').bind('keyup change', function() { 
    var $table = $(this).closest('table'); 
    var total = 0; 
    var thisNumber = $(this).attr('class').match(/(\d+)/)[1]; 

    $table.find('tr:not(.totalColumn) .sum'+thisNumber).each(function() { 
     total += +$(this).val(); 
    }); 

    $table.find('.totalColumn td:nth-child('+thisNumber+') input').val(total); 
}); 

<table id="sum_table" width="600" border="0"> 
    <tr> 
     <td>Sum 1</td> 
     <td>Sum 2</td> 
     <td>Sum 3</td> 
    </tr> 
    <tr> 
     <td><input type="text" name="textfield" id="textfield" class="sum1" /></td> 
     <td><input type="text" name="textfield2" id="textfield2" class="sum2" /></td> 
     <td><input type="text" name="textfield3" id="textfield3" class="sum3"/></td> 
    </tr> 
    <tr> 
     <td><input type="text" name="textfield4" id="textfield4" class="sum1" /></td> 
     <td><input type="text" name="textfield5" id="textfield5" class="sum2" /></td> 
     <td><input type="text" name="textfield6" id="textfield6" class="sum3" /></td> 
    </tr> 
    <tr> 
     <td><input type="text" name="textfield7" id="textfield7" class="sum1" /></td> 
     <td><input type="text" name="textfield8" id="textfield8" class="sum2"/></td> 
     <td><input type="text" name="textfield9" id="textfield9" class="sum3"/></td> 
    </tr> 
    <tr> 
     <td>Total</td> 
     <td>Total</td> 
     <td>Total</td> 
    </tr> 
    <tr class="totalColumn"> 
     <td><input type="text" name="textfield10" id="textfield10" /></td> 
     <td><input type="text" name="textfield11" id="textfield11" /></td> 
     <td><input type="text" name="textfield12" id="textfield12" /></td> 
    </tr> 
    <tr> 
     <td>bla</td> 
     <td>bla</td> 
     <td>bla</td> 
    </tr> 
</table>

像往常一樣，我不知道這是否是最佳的，但它似乎工作：

請參閱：http://jsfiddle.net/gXdwb/

$('#sum_table tr:not(:last-child)').bind('keyup change', function() { 
    var $table = $(this).closest('table'); 
    var total = 0; 

    $table.find('tr:not(:last-child) input:text').each(function() { 
     total += +$(this).val(); 
    }); 

    $table.find('input[name="total"]').val(total); 
});

來源

2011-05-29 19:03:26 thirtydot

thirtydot，看起來不錯，謝謝。我如何修改它以便僅定位具有特定類的列？ – Psyche 2011-05-29 19:06:22

謝謝。你可以在我的答案中的具體類到演示？我不確定您要添加課程的位置。（可能是'tr'，但我寧願選中） – thirtydot 2011-05-29 19:08:05

忘記我以前的評論，當然你的意思是'tr'。你可以這樣做：http://jsfiddle.net/gXdwb/1/ – thirtydot 2011-05-29 19:13:31

<html> 
<head> 
<script type="text/javascript"> 
function calc() 
{ 
var sum = parseFloat(document.getElementById('val1').value + document.getElementById('val2').value + document.getElementById('val3').value + [...]); 
document.getElementById('total').value = sum; 
} 
</script> 
</head> 
<body> 
<table id="sum_table"> 
    <tr> 
    <td>Column 1</td> 
    <td><input type="text" id="val1" value="" OnTextChanged="javascript:calc()"/></td> 
    </tr> 
    <tr> 
    <td>Column 2</td> 
    <td><input type="text" id="val2" value="" OnTextChanged="javascript:calc()/></td> 
    </tr> 
    <tr> 
    <td>Column 3</td> 
    <td><input type="text" id="val3" value="" OnTextChanged="javascript:calc()/></td> 
    </tr> 
    [...] 
    <tr> 
    <td>Total</td> 
    <td><input type="text" id="total" value="" /></td> 
    </tr> 
</table> 
</body> 
</html>

這應該是訣竅。

來源

2011-05-29 18:55:29 RobinJ

OnTextChanged與onChange有什麼不同？ – Jonathon 2011-05-29 18:58:53

對於少量列可以使用，但如果有100列？ – Psyche 2011-05-29 19:03:22

您應該可以將它們放入數組中，然後計算所有值的總和。但我不確定這是如何完成的。 – RobinJ 2011-05-29 19:15:09

使用Javascript計算可變數量的html表列的總和

回答

相關問題