汇总表中的值答案

【问题标题】：Totalling up values in a table汇总表中的值
【发布时间】：2011-06-24 19:15:32
【问题描述】：

ajax调用后成功返回结果，则：

var the_data = results;

var buildHTML = [];

buildHTML.push("<tr><td>Department</td><td>Count</td><td>Value</td>");

for (var i = 0; i < the_data.length; i++) {
    buildHTML.push("<tr><td>" + the_data[i].department + "</td><td>" + the_data[i].count + "</td><td>£" + the_data[i].value + "</td>");
}

$('.portlet-content').empty().append("<table>" + buildHTML.join('</tr>') + "</table>");

构建类似的东西：

<table>
    <tr>
        <td>
            Department
        </td>
        <td>
            Count
        </td>
        <td>
            Value
        </td>
    </tr>
    <tr>
        <td>
            Marketing
        </td>
        <td>
            10
        </td>
        <td>
            £100,000
        </td>
    </tr>
    <tr>
        <td>
            Information Technology
        </td>
        <td>
            20
        </td>
        <td>
            £1,000,000
        </td>
    </tr>
</table>

我知道如何在该表的底部添加另一个最后一行，但在该行中，我想显示总计，即计数的总计和值的总计，例如：

<table>
    <tr>
        <td>
            Department
        </td>
        <td>
            Count
        </td>
        <td>
            Value
        </td>
    </tr>
    <tr>
        <td>
            Marketing
        </td>
        <td>
            10
        </td>
        <td>
            £100,000
        </td>
    </tr>
    <tr>
        <td>
            Information Technology
        </td>
        <td>
            20
        </td>
        <td>
            £1,000,000
        </td>
    </tr>
    <tr>
        <td>
            Total
        </td>
        <td>
            30
        </td>
        <td>
            £1,100,000
        </td>
    </tr>
</table>

如何在客户端做到这一点？

【问题讨论】：

标签： javascript html jquery html-table

【解决方案1】：

这是一个通用解决方案，适用于任何带有 tfoot 和 tbody 的桌子：

$("table tfoot td").each(function(columnIndex) {
    var totalsElement = $(this);

    if (totalsElement.hasClass("sumTotal")) {
        var sum = 0.0;
        totalsElement.parents("table").find("tbody tr").each(function() {
            sum += parseFloat($(this).children("td").eq(columnIndex).html());
        });
        totalsElement.html(sum);
    }
});

您需要使用“sumTotal”CSS 类标记计算出的页脚单元格。为了简单起见，我不得不从表格中删除磅字符，但它可以工作：

http://jsfiddle.net/fRdpJ/47/

【讨论】：

【解决方案2】：

您可以简单地修改代码中的 for 循环来获得总和。

...
// vars for sum
var the_count = 0, the_sum = 0;
for (var i = 0; i < the_data.length; i++) {
    the_count += the_data[i].count;
    the_sum += the_data[i].value;
    buildHTML.push("<tr><td>" + the_data[i].department + "</td><td>" + the_data[i].count + "</td><td>£" + the_data[i].value + "</td>");
}
buildHTML.push("<tr><td>Total</td><td>" + the_count + "</td><td>" + the_sum + "</td>");
...

【讨论】：

【解决方案3】：

在您要计算计数的TD 上添加class="Count"，然后使用 JQuery 计算计数，如下所示：

http://jsfiddle.net/sv2dg/13/

【讨论】：