如何对greasemonkey中现有的表进行排序？

Question

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

到目前为止，所有对答案的搜索都得出了使用 jquery/dojo 或类似内容的建议。

我可以在没有任何外部代码的情况下完成吗？毕竟，这只是以不同的顺序替换行的问题，对吧？或者说这是一件愚蠢的事情吗？

问题是，我已经在使用 dojo 来满足某些查询需求，但由于我希望它在 Firefox 和 Chrome 中运行，所以我只需将整个 dojo 内容复制粘贴到我的脚本中。

另外，到目前为止我找到的大多数解决方案似乎更适合在构建表格时使用，而不是用于更改现有表格。

任何帮助表示赞赏。

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

Answer 1

聪明的方法是使用像 tablesorter 这样的工具。
但是，由于您不想使用外部代码（目前），因此可以通过困难的方式来完成。

以下是如何以半困难的方式做到这一点。请注意，我AM使用 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 上的数字排序< /a>。

Answer 2

我试图不回答这些“能给我一些代码吗”的问题，但因为安德斯刺痛了我。这是一个没有库的简单答案。但有一些重大假设：

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);
  }
}​

演示： http://jsbin.com/akexe4