2

我有一个由代码生成的包含许多行和列的 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] : ''; <--- 并解决一些小错误表格末尾的空列（在 alnitak 的优雅解决方案中，未添加最后一行的 TD）

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

4

2 回答 2

4

见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 的出现次数，并针对每个“位置”进行更新。​</p>

于 2012-06-25T12:57:00.843 回答
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，从而导致空白单元格，但更糟糕的是，对于没有匹配单元格的任何尾随列，单元格会完全丢失。

于 2012-06-25T14:01:24.293 回答