Question

在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>

如何在客户端完成？

Answer 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/

Answer 2

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

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

Answer 3

您可以简单地修改代码中的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 个答案: