如何在Greasemonkey中对现有表格进行排序？

Question

我正在为一个包含表格的页面编写 greasemonkey user.js。 （表格为 100 行乘以 18 列。）现在我想做的是按列进行排序，并且在 Chrome 和 Firefox 中都运行。

到目前为止，所有搜索答案的结果都建议使用 jquery/dojo 或类似工具。

能否不使用任何外部代码来完成？毕竟只是将行替换为不同的顺序，对吧？还是这种说法很愚蠢？

问题是我已经在一些查询需求中使用了 dojo，但由于我希望它在 Firefox 和 Chrome 中运行，因此我只需将整个 dojo 复制粘贴到我的脚本中即可。

另外，我找到的大多数解决方案似乎更适用于构建表格，而不是修改现有表格。

感激您提供的任何帮助。

编辑：表格中的所有单元格均包含数字。

- plastic cloud

---

没错，这是可以做到的。我曾经为一次工作面试而这样做过... - Hemlock

@Hemlock，不介意分享成为一个答案吗？ - Anders

Answer 1

智能的方法是使用像tablesorter这样的工具。
但是，由于现在您不想使用外部代码，因此可以采用困难的方法完成。

以下是半困难的方法。 请注意，我正在使用jQuery。 您最好将至少包含它到您的脚本中。

继续使用// @require指令。 您仍然可以使用Tampermonkey扩展程序在Chrome中运行GM脚本。
（还有其他在Chrome中包括jQuery在GM脚本中的方法。）

无论如何，像这样的代码就可以解决问题：

//--- Get the table we want to sort.
var jTableToSort    = $("table#myTable");

//--- Get the rows to sort, but skip the first row, since it contains column titles.
var jRowsToSort     = jTableToSort.find ("tr:gt(0)");

//--- Sort the rows in place.
jRowsToSort.sort (SortByFirstColumnTextAscending).appendTo (jTableToSort);

function SortByFirstColumnTextAscending (zA, zB)
{
     var ValA_Text  = $(zA).find ("td:eq(0)").text ();
     var ValB_Text  = $(zB).find ("td:eq(0)").text ();

     if      (ValA_Text  >  ValB_Text)
        return 1;
     else if (ValA_Text  <  ValB_Text)
        return -1;
     else
        return 0;
}

你可以在 jsFiddle 上 看到它的实际效果。

---

更新:

如果要对数字进行排序，您可以使用类似以下的排序函数：

function SortBy2ndColumnNumber (zA, zB)
{
   var ValA = parseFloat ($(zA).find ("td:eq(1)").text () );
   var ValB = parseFloat ($(zB).find ("td:eq(1)").text () );

   return ValA - ValB;
}

在 jsFiddle 上查看数字排序的演示.

- Brock Adams

---

非常感谢！但是，我忘了提到表格中只有数字。如何使用您的代码技术对这些数字进行排序？我稍后会尝试使用Tampermonkey再次使其工作。目前还不行。 - plastic cloud

@plastic cloud: 我已更新我的回答以显示数字排序。 - Brock Adams

Answer 2

我尝试避免回答这些“请给我一些代码”的问题，但由于Anders的挑衅。这里有一个简单的答案，没有使用任何库。但是有一些重要的假设：

1. 只有整数在要排序的列中
2. 只在一列上进行排序
3. 没有指示排序状态
4. 没有IE，因为它不能执行Array.prototype.slice.call技巧。

你可以很容易地改进getRowValue来解决第1个假设。

function sortTable(table, col) {
  var rows = Array.prototype.slice.call(table.getElementsByTagName('tr'), 0);
  rows.sort(function(a,b) {
    return getRowValue(a, col) - getRowValue(b, col);
  });

  for (var i=0, row; row = rows[i]; i++) {
    table.appendChild(row);
  }

  function getRowValue(row, col) {
    return parseInt(row.cells[col].innerHTML, 10);
  }
}​

DEMO: http://jsbin.com/akexe4

- Hemlock

---

谢谢，总是很有趣看不同的实现方式。 - Anders