如何使用 jQuery 计算具有特定类的单列的 td

Question

我有一个由代码生成的包含许多行和列的 html 表。 其中一些 TD 有一个 ON 类来设置不同的样式。

表格的结构有表头、正文和页脚行。

我想将每列中所有具有“ON”类的 TD 的数量相加，并将结果放在每列的最后一行（页脚）。

我该怎么做？ （行列不是固定矩阵，所以事先不知道表有多少行列）

示例表：

data       | id_1 | id_2 | id_3 | ...
2012-06-20 | "ON" |      |      | ...
2012-06-21 | "ON" |      |      | ...
2012-06-22 | "ON" | "ON" |      | ...
2012-06-23 | "ON" |      | "ON" | ...
2012-06-24 | "ON" | "ON" |      | ...
tot        |   5  |   2  |   1  | ...

更新：混合使用 CRANIO 和 ALNITAK 的解决方案，结果如下：

var a = [];
$('td').each(function() {

    var n = $(this).index();
    if($(this).hasClass('on')){
       a[n] = a[n] ? a[n] + 1 : 1;
    }else{
       a[n] = a[n] ? a[n] : 0;
    }
});

var t = $('<tr>').appendTo('#tableID > tfoot');
$.each(a, function(i, n) {
    t.append($('<td>', { text: i === 0 ? 'total' : n }));
});

通过这种方式，您可以在没有 TD.on 的列中添加零（或空格 ---> a[n] = a[n] ? a[n] : '';

附：也可用于在不同的 TD.class 上创建不同的总行，根据不同的类附加更多的 TR。

Answer 1

见http://jsfiddle.net/cranio/RTugL/

我试过这张桌子：

<table>
<tr>
    <td></td>
    <td></td>
    <td class='on'>.</td>
    <td class='on'>.</td>
</tr>    

<tr>
    <td class='on'>.</td>
    <td class='on'>.</td>
    <td></td>
    <td></td>
</tr>    
<tr>
    <td></td>
    <td class='on'>.</td>
    <td class='on'> .</td>
    <td class='on'>.</td>
</tr>    </table>

使用此代码：

var a = new Array();
$("table tr").each(
    function (i,e)
    {
        $(e).find("td").each(
            function (i,e)
            {
                if (!a[i]) a[i] = 0;
               if ($(e).hasClass("on")) a[i]++;   
            });});
var lastrow = $("<tr>");
$.each(a, function(i,e) { lastrow.append("<td>"+e+"</td>");});
$("table").append(lastrow);

我所做的是计算 TD.on 在数组中的出现次数，更新为 每个“位置”。 ​

Answer 2

这是我目前能想到的最短代码：

var a = [];
$('td.on').each(function() {
    var n = $(this).index();
    a[n] = a[n] ? a[n] + 1 : 1;
});

var t = $('<tr>').appendTo('table');
$.each(a, function(i, n) {
    t.append($('<td>', { text: i === 0 ? 'total' : n }));
});​

http://jsfiddle.net/alnitak/6XTvN/ 的工作示例

编辑以确保不匹配的列的空单元格（和零）这里是第一个代码块的变体：

var a = [];
$('td').each(function() {
    var n = $(this).index();
    a[n] = a[n] || 0;
    a[n] += $(this).hasClass('on');
});

我的第一个版本有一个小缺陷，即没有匹配单元格的列会在a 中产生未定义的值，从而导致空白单元格，但更糟糕的是，对于没有匹配单元格的任何尾随列，单元格会完全丢失。