jquery中如何將表單元素逐列逐列求和？

Question

我有正在增加表格行和3列，每個單元格包含文本框。我想將前2列的值總和爲每行的第3列。我怎麼能用jQuery來做到這一點？

讓我更直觀：

 c1 c2 s 
r1 5  6 11 
r2 7  3 10 
.  .  . . 
s sc1 sc2 sc3 

SC1，SC2，SC3是相關列的總和，你看。

Answer 1

你應該建立你的表是這樣的：

<table class="summonizer"> 
    <thead> 
    <tr> 
     <th></th> 
     <th>c1</th> 
     <th>c2</th> 
     <th>s</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <th>r1</th> 
     <td><input type="text" value="5"/></td> 
     <td><input type="text" value="6"/></td> 
     <td></td> 
    </tr> 
    <tr> 
     <th>r2</th> 
     <td><input type="text" value="7"/></td> 
     <td><input type="text" value="3"/></td> 
     <td></td> 
    </tr> 
    </tbody> 
    <tfoot> 
    <tr> 
     <th>s</th> 
     <td></td> 
     <td></td> 
     <td></td> 
    </tr> 
    </tfoot> 
</table> 

而JavaScript應該是這樣的：

function summonize_table($table) { 
    var col_sums = []; 
    var row_sums = []; 
    var all_sum = 0; 
    $table.find('tbody tr').each(function(row){ 
    row_sums[row] = 0; 
    $(this).find('td input[type=text]').each(function(column){ 
     value = parseInt(this.value); 
     row_sums[row] += value; 
     if (!col_sums[column]) col_sums[column] = 0; 
     col_sums[column] += value; 
     all_sum += value; 
    }); 
    }); 
    $.each(row_sums,function(index,value){ 
    $table.find('tbody tr:eq('+index+') td:last').html(value); 
    }); 
    $.each(col_sums,function(index,value){ 
    $table.find('tfoot tr td:eq('+index+')').html(value); 
    }); 
    $table.find('tfoot tr td:last').html(all_sum); 
} 
$(function(){ 
    $('table.summonizer input[type=text]').live('change',function(){ 
    summonize_table($(this).closest('table')); 
    }); 
    $('table.summonizer input[type=text]:first').trigger('change'); 
}); 

這裏你可以看到一個工作示例：http://jsfiddle.net/my9DF/

Answer 2

快速和粗略的版本 - 對於每個TR，將其子TD的內容轉換爲數字並進行求和，然後當求和完成時，以「sum」值作爲文本結束時彈出TD。

$("tr").each(function() { 
    var sum = 0; 
    $("td", $(this)).each(function() { 
     sum += Number($(this).text()); 
    }); 
    $(this).append($("<td>").text(sum)); 
});