Как сформировать элементы можно суммировать отдельно по столбцу строки по столбцу в 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 преобразует содержимое своих дочерних TDs в числа и суммирует их, а затем, когда выполняется суммирование, введите TD в конец со значением «sum» в качестве текста.

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