如何抑制可排序的html表格中重复值的显示？答案

【问题标题】：How to suppress the display of repeating values in html tables which can be sorted?如何抑制可排序的html表格中重复值的显示？
【发布时间】：2010-11-05 05:06:20
【问题描述】：

我有一个从 XML/XSL 生成的 HTML 表格，我希望它抑制重复值。但是，我还想通过单击标题对其进行动态排序。

如果没有往返服务器，我需要在每次排序后抑制不同的值。有没有好的 javascript/css 解决方案。

例如

数据

Date  Person Score  
May   Jeff   1  
May   Joel   2  
June  Alex   1

初始显示
注意缺少第二个五月

Date  Person Score  
May   Jeff   1  
      Joel   2  
June  Alex   1

按分数排序后显示
注意缺少第二个 1

Date  Person Score  
May   Joel   2  
June  Alex   1
May   Jeff

【问题讨论】：

是在响应中发送的重复值，然后使用 CSS 隐藏，还是不包含在响应中？
我们正在发送基础值，然后我们想稍后隐藏它们。否则，如果需要显示曾经隐藏的值，我们将不得不进行往返。

标签： javascript html css sorting html-table

【解决方案1】：

我个人会使用jQuery Table Sorter 之类的东西。您也可以使用 unique() 函数来删除重复项。使用 jQuery 只是让做事比使用 JS 容易得多。要么，要么我将 JSF 用于我的表示层，它已经为这种场合提供了功能。

我真的不知道用 JS 来做这件事的“好”方法。我见过的 JS 中的每一个实现都是混乱的。将 jQuery 添加到您的项目将使您不必编写讨厌的 JS 代码。

【讨论】：

【解决方案2】：

有一个 javascript 函数循环遍历相关的表列，并删除与之前相同的值。您可能还想将 rowspan 属性添加到具有该值的第一个单元格，以便表的语义正确。

这不是 CSS 真正的工作，因为它处理信息而不仅仅是显示内容（而且这真的很难）。

【讨论】：

【解决方案3】：

我建议在 td 上设置一个具有重复值的类来隐藏它们，这样就不会丢失数据。您可以遍历列中的每个单元格，将其与最后一个单元格进行比较，如果相同，则将“重复”类添加到单元格中。

function after_sort(sort_column) {
    clear_duplicate_classes();

    var last = null;
    for (var i = 0; i < trs.length; i++) {
        var td = get_nth_td(trs[i], sort_column);
        if (td.innerHTML === last) {
            add_duplicate_class(td);
        }
        else {
            last = td.innerHTML;
        }
    }
}

如果你使用像 jQuery 这样的库，它看起来像这样：

function after_sort(table, sort_column) {
    $(table).find(".duplicate").removeClass("duplicate");

    var last = null;
    $(table).find("tr").each(function() {
        var td = $(this).find("td").get(sort_column); // doesn't account for colspan
        if (td.innerHTML === last) {
            $(td).addClass("duplicate");
        }
        else {
            last = td.innerHTML;
        }
    });
}

这些完全未经测试，所以我可能遗漏了一些东西。使用风险自负等。

【讨论】：

【解决方案4】：

查看我的表格排序器插件：jquery.tablesorter.deduper.js。它不是删除值本身，而是将 CSS 类添加到重复值中，因此结果相似（您可以隐藏它）。

Here is an example

【讨论】：