jQuery中列的总和
以下代码无效。 正如你在jsfiddle上看到的那样，我需要按列加总 。 出了什么问题？
HTML
Apple Orange Watermelon 1 2 3 1 2 3 1 2 3 Total: Total: Total:
使用Javascript
$(document).ready(function(){ $(".rowDataSd").each(function() { newSum.call(this); }); }); function newSum() { var $table = $(this).closest('table'); var total = 0; $(this).attr('class').match(/(\d+)/)[1]; $table.find('tr:not(.totalColumn) .rowDataSd').each(function() { total += parseInt($(this).html()); }); $table.find('.totalColumn td:nth-child('')').html(total); }
这是一个jsffile 。 希望这可以帮助
Apple Orange Watermelon 1 2 3 1 2 3 1 5 3 Total: Total: Total:
$('#sum_table tr:first td').each(function(){ var $td = $(this); var colTotal = 0; $('#sum_table tr:not(:first,.totalColumn)').each(function(){ colTotal += parseInt($(this).children().eq($td.index()).html(),10); }); $('#sum_table tr.totalColumn').children().eq($td.index()).html('Total: ' + colTotal); });
实例： http ： //jsfiddle.net/unKDk/7/
jsFiddle with example
为此，我们可以充分利用table元素中的thead和tfoot标签。 稍作修改，我们有以下内容：
HTML
Apple Orange Watermelon 1 2 3 1 2 3 1 2 3 Total: Total: Total:
然后，这允许我们更具体地定位我们想要的元素，即有多少列，以及什么是“总”单元格。
JavaScript的
$(document).ready(function() { $('table thead th').each(function(i) { calculateColumn(i); }); }); function calculateColumn(index) { var total = 0; $('table tr').each(function() { var value = parseInt($('td', this).eq(index).text()); if (!isNaN(value)) { total += value; } }); $('table tfoot td').eq(index).text('Total: ' + total); }
另一种方式：
$(document).ready(function(){ for (i=0;i<$('#sum_table tr:eq(0) td').length;i++) { var total = 0; $('td.rowDataSd:eq(' + i + ')', 'tr').each(function(i) { total = total + parseInt($(this).text()); }); $('#sum_table tr:last td').eq(i).text(total); } });
示例： http ： //jsfiddle.net/lucuma/unKDk/10/
只需稍微调整一下表中的类即可轻松完成：
HTML：
Apple Orange Watermelon 1 2 3 1 2 3 1 2 3 Total: Total: Total:
JS：
var getSum = function (colNumber) { var sum = 0; var selector = '.col' + colNumber; $('#sum_table').find(selector).each(function (index, element) { sum += parseInt($(element).text()); }); return sum; }; $('#sum_table').find('.total').each(function (index, element) { $(this).text('Total: ' + getSum(index + 1)); });
我知道现在已经很好地回答了这个问题，但是在我得到所有答案之前我开始研究这个解决方案并希望继续发布它。
此解决方案适用于您发布的HTML，并假设有以下内容：1）第一行是标题行，2）最后一行是总行，3）每行具有相等的列，以及4）列包含整数。 在这种情况下，只需要识别表。
$(document).ready(function(){ totalRows("#sum_table"); }); function totalRows(tableSelector) { var table = $(tableSelector); var rows = table.find("tr"); var val, totals = []; //loop through the rows getting values in the rowDataSd columns rows .each(function(rIndex) { if (rIndex > 0 && rIndex < (rows.length-1)) { //not first or last row //loop through the columns $(this).find("td").each(function(cIndex) { val = parseInt($(this).html()); (totals.length>cIndex) ? totals[cIndex]+=val : totals.push(val); }); } }) .last().find("td").each(function(index) { val = (totals.length>index) ? totals[index] : 0; $(this).html( "Total: " + val ); }); }$(document).ready(function(){ totalRows("#sum_table"); }); function totalRows(tableSelector) { var table = $(tableSelector); var rows = table.find("tr"); var val, totals = []; //loop through the rows getting values in the rowDataSd columns rows .each(function(rIndex) { if (rIndex > 0 && rIndex < (rows.length-1)) { //not first or last row //loop through the columns $(this).find("td").each(function(cIndex) { val = parseInt($(this).html()); (totals.length>cIndex) ? totals[cIndex]+=val : totals.push(val); }); } }) .last().find("td").each(function(index) { val = (totals.length>index) ? totals[index] : 0; $(this).html( "Total: " + val ); }); }
先生，先生！ http://jsfiddle.net/47VDK/