Javascript 使用客户端HTML表排序对行进行分组

是否有任何现有的表排序库，或者是否有一种方法可以配置为每两行排序一次？另外，有没有更好的方法在语义上表示我的表，这样标准的行排序就可以工作了

我有一个html表，看起来像这样

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Some Data: 1</td>
            <td>Some More Data:1 </td>
        </tr>
        <tr>
            <td colspan="2">Some text about the above data that puts it in context and visually spans under both of the cells above so as not to create a weird looking table</td>
        </tr>

        <tr>
            <td>Some Data: 2</td>
            <td>Some More Data: 2</td>
        </tr>
        <tr>
            <td colspan="2">Some text about the above data 2 set that puts it in context and visually spans under both of the cells above so as not to create a weird looking table</td>
        </tr>           

    </tbody>
</table>

标题1
标题2
一些数据：1
更多数据：1
一些关于上述数据的文本将其放在上下文中，并在上面两个单元格下进行视觉跨越，以避免创建外观怪异的表
一些数据：2
更多数据：2
关于上述数据2集合的一些文本将其置于上下文中，并在上面的两个单元格下进行视觉跨越，以避免创建外观怪异的表

---

我正在寻找一种对表格进行排序的方法，这样表格就可以按数据行排序，但是带有colspan的行与其数据一起移动，而不是单独排序。

可以逻辑（不一定是语义）将相关行分组在一起的唯一元素是

，因为有多个

元素是有效的。然而，在这种情况下，由于tablesorter的实现方式，这对您没有任何帮助

我可以在tablesorter源代码中看到一个未记录的配置选项-

appender

，它允许您指定一个函数，该函数接受要排序的表，并指定一个数据结构，其中包含要追加到表中的已排序行，以实现所需的重新排序，但是我看不到任何选项可以让您配置它在进行排序时查看哪些行

如果问题的第一部分出现了，您可以使用它将考虑排序的行限制为实际数据行，并使用

appender

选项提供一个函数，将每个排序的行及其下一行同级追加

编辑：以下是您所需的额外部分的快速而糟糕的实现和使用示例：

对

buildCache

方法的修改，从第195行开始到jquery.tablesorter.js：

var rowsToSort = table.config.rowsToSort ? table.config.rowsToSort(table) : table.tBodies[0].rows;
var totalRows = rowsToSort.length,
    totalCells = (rowsToSort[0] && rowsToSort[0].cells.length) || 0,
    parsers = table.config.parsers,
    cache = {row: [], normalized: []};

适用于您的示例表的用法：

$(document).ready(function() {
    $.tablesorter.defaults.debug = true;

    // Select every other row as sorting criteria
    $.tablesorter.defaults.rowsToSort = function(table)
    {
      var rows = [];
      var allRows = table.tBodies[0].rows;
      for (var i = 0, l = allRows.length; i < l; i += 2)
      {
        rows.push(allRows[i]);
      }
      return rows;
    };

    // Append each row and its next sibling row
    $.tablesorter.defaults.appender = function (table, rows)
    {
      for (var i = 0, l = rows.length; i < l; i++)
      {
        var row = rows[i][0];
        var buddyRow = $(row).next("tr").get(0);
        table.tBodies[0].appendChild(row);
        table.tBodies[0].appendChild(buddyRow);
      }
    };

    $("table").tablesorter();
});

$（文档）.ready（函数（）{
$.tablesorter.defaults.debug=true；
//选择每隔一行作为排序标准
$.tablesorter.defaults.rowsToSort=函数（表）
{
var行=[]；
var allRows=table.tBodies[0]。行；
对于（变量i=0，l=allRows.length；i

有人为tablesorter开发了此功能。查看此页面：

您所需要做的就是为辅助行提供一个“ExpandChild”类（这是可配置的）

这正是你需要的