javascript - 对列表而不是行进行排序

Question

我有一个表格，其中标题位于第一列。我搜索了一种按此列对表格进行排序的方法。我知道数据表和表排序器，但我没有找到任何解决方案来对我的表进行这样的排序。

为了清楚起见，这是我的表格的示例:

Name | John | Jane | Toto
Value| 1256 |  125 | 8563
Val2 |   12 |   45 |    3

(这里是 JSFiddle 上的代码开头: https://jsfiddle.net/nLwo8bya/1/ )

我想单击第一列中的单元格以按此行对其他列进行排序。

如果我点击名称，上一个表格将是:

Name | Jane | John | Toto
Value|  125 | 1256 | 8563
Val2 |   45 |   12 |    3

表的列现在按名称排序(在本例中为第一行)。

预先感谢您的帮助

编辑:就像 nnnnnn 所说，我想按第一个列对列进行排序

Answer 1

我想到的第一个方法是重组表格，这样您最终会得到一行，每列一个 td；这些列 td 中的每一个都将包含一个嵌套表，其中包含该列的数据。这样，实际的排序过程就非常简单，因为您只需对顶级 td 进行排序即可。

复杂的部分是重组。以下只是我为实现这一目标而编写的第一堆丑陋的代码。这可能可以进行大量整理和优化，或者以更智能的方式完全重写，但我将其作为读者的练习......

$(document).ready(function(){
  var trs = $("table tr");
  var tds = trs.find("td");
  var columnCount = trs.first().children().length;
  var columns = [];
  var sortableTR = $("<tr></tr>");
  for (var i = 0; i < columnCount; i++)
    columns.push([]);

  tds.each(function(i,td) {
    columns[i%columnCount].push($("<tr></tr>").append(td));
  });  
  columns.forEach(function(v) {
    sortableTR.append($("<td></td>").append($("<table></table>").append(v)));
  });
  trs.remove("tr");
  $("table").append(sortableTR);
  sortableTR.children().first().on("click", "tr", function(e) {
    var row = $(this);
    var rowIndex = row.index();
    var dataType = row.find("td").attr("data-type");
    var cols = sortableTR.children().slice(1);
    cols.sort(function(a, b) {
      a = $(a).find("td").eq(rowIndex).text();
      b = $(b).find("td").eq(rowIndex).text();
      if (dataType==="number") {
        a = +a;
        b = +b;
      }
      return a > b ? 1 : a < b ? -1 : 0;
    });
    cols.each(function() { sortableTR.append(this); });
  });
});

table, tr, td { border: none; border-collapse: collapse; }
td { width: 100px; padding: 0px; margin: 0px; }
td td { border: thin grey solid; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table border="1">
<tr><td data-type="string"><b>Name</b></td><td>John</td><td>Jane</td><td>Jack</td></tr>
<tr><td data-type="number"><b>Age</b></td><td>36</td><td>34</td><td>42</td></tr>
<tr><td data-type="number"><b>Weight</b></td><td>111</td><td>56</td><td>82</td></tr>
<tr><td data-type="number"><b>Score</b></td><td>25</td><td>42</td><td>18</td></tr>
</table>

请注意，我向标题单元格添加了一个data-type 属性，以便排序知道是否将数据视为数字。

修复结果表格上的样式是我留给读者的另一件事作为练习......