Подведение итогов в таблице

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);
    }
});

Вам нужно пометить вычисленные ячейки нижнего колонтитула с помощью CSS-класса "sumTotal". Для простоты мне пришлось убрать символы фунта из таблицы, но это работает:

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

Answer 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>");
...

Answer 3

добавьте class="Count" к TD, для которого вы хотите вычислить количество, а затем рассчитайте количество, используя JQuery, например:

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