Как отсортировать существующую таблицу в greasemonkey? - PullRequest
Новая
       14

Как отсортировать существующую таблицу в greasemonkey?

6 голосов
/ 11 января 2011

Я пишу greasemonkey user.js для страницы с таблицей в ней.(Таблица состоит из 100 строк по 18 столбцов.) Теперь я хочу сделать так, чтобы она сортировалась по столбцам, а также чтобы она выполнялась как в Chrome, так и в Firefox.использовать jquery / dojo или что-то подобное.

Можно ли обойтись без какого-либо внешнего кода?В конце концов, это просто вопрос замены ряда в другом порядке, верно?или это глупо говорить?

Дело в том, что я уже использую dojo для некоторых запросов, но так как я хочу, чтобы он работал как в Firefox, так и в Chrome, я просто копирую и вставляю всю вещь dojoв моем сценарии ..

Кроме того, большинство решений, которые я нашел до сих пор, похоже, больше подходят для построения таблицы, а не для изменения существующей.

Любая помощь приветствуется.

РЕДАКТИРОВАТЬ: Все ячейки в таблице содержат числа.

Ответы [ 2 ]

3 голосов
/ 11 января 2011

Умный способ - использовать такой инструмент, как tablesorter .
Но, поскольку вы не хотите использовать внешний код (пока), это можно сделать трудным способом.

Вот как это сделать полужестким способом.Обратите внимание, что я AM , используя jQuery.Было бы разумно включить, по крайней мере, это в ваш скрипт.

Идите вперед и используйте директиву // @require .Вы по-прежнему можете запускать GM-скрипт в Chrome, используя расширение Tampermonkey .
(есть и другие способы включения jQuery в GM-скрипты в Chrome .)

В любом случае, код, подобный следующему: сделает свое дело: 

//--- 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 .

2 голосов
/ 11 января 2011

Я пытаюсь не отвечать на эти вопросы: «Могу ли я получить какой-нибудь код, пожалуйста», но так как Андерс мне надоел.Вот простой ответ без библиотек.Некоторые большие предположения:

  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

...