Question

我在前端创建了一个包含多个列的表。包含数据的表格如下所示：

    ID         Name          Date1           Date2         Code1    
   00001        abc         2012/1/1         2012/1/10       1
   00002        def         2012/1/12        2012/2/1        1
   00002        def         2012/1/12        2012/2/1        2
   00002        def         2012/1/12        2012/2/1        3
   00003        xyz         2012/2/12        2012/3/1        2
   00003        xyz         2012/2/12        2012/3/1        4

现在我想以分组的方式在上表中显示数据，即每个唯一的Id只有1行，所有代码列合并并显示为1行。

    ID         Name          Date1           Date2         Code1    
   00001        abc         2012/1/1         2012/1/10       1
                                                             1
   00002        def         2012/1/12        2012/2/1        2                              
                                                             3
   00003        xyz         2012/2/12        2012/3/1        2
                                                             4

请忽略我的格式化风格。当我没有关于代码值数量的信息时，这可以编程吗？提前致谢。

Answer 1

是的，这当然是可能的。

根据表格上的限制（例如，ID严格增加？），可以想到几种算法可以完全满足您的要求。

但是，我强烈建议反对它。直接在DOM上使用jQuery执行此操作将需要大量的DOM访问操作，并且相对较慢。在服务器端执行此操作会更好，我认为生成数据，或者在客户端上执行相同数据的数组/对象表示。

Answer 2

此函数将删除复制其上方单元格内容的单元格内容。它不会合并它们（例如rowspan / colspan），但它会将它们清空。

function emptyDittoCells(table) {
    if (!(table instanceof jQuery && table.is("table")))
        throw "bad parameter";

    table.find('tr').each(function(rowElement) {
        var row = $(rowElement);
        var previousRow = $(rowElement).prev('tr');
        if (!previousRow.length) return;

        row.each(function(cellElement, index) {
            var cell = $(cellElement);
            var previousCell = previousRow.children("td:nth-child(" + index + ")"); 

            while (previousCell.data('ditto')) {
                previousCell = previousCell.data('ditto');
            }

            if (hasSameContents(cell, previousCell)) {
                cell.empty()
                    .data('ditto', previousCell);
            }
        });
    });
}

function hasSameContents(a, b) {
    return (a.text() == b.text()); // naive but usable in the simple case
}

未经测试且有点DOM密集，但我认为它会起作用。除了可能的语法错误（缺少密括号），我最关心的是td:nth-child()选择器。这可以更加健壮地写成$(previousRow.children('td').get(index))。

Answer 3

如前所述，这种转换在服务器端更好。

但是如果表不是太大，并且假设Name，Date1和Date2具有给定ID的相同值，则可以解析表（例如，使用jQuery）并从头开始重建它。

一些伪代码：

foreach (row)
{
  foreach (column)
  {
    get ID value;
    if (not yet stored) store data for that ID somewhere else;
    store Code1 value with its ID;
  }
}

foreach (ID stored)
{
  get all related values;
  rebuild table row;
}

我希望它有所帮助。如果没有，那么编写一些jQuery代码就不那么困难了。

使用jquery对表中的行进行分组

3 个答案: