Каков наилучший способ сортировки строк в jQuery?

Question

У меня есть TR (или деление с классом - это не имеет значение), как это

Я хочу отсортировать строки по SCORE.

Name     |     Age        |Score 
-----------------------------------
John           26           90
paul           25           75
ringo          25           77

I know уже есть плагин для jquery, который сортирует tables, но я хочу создать my.

У меня нет проблем с поиском значений в столбце оценки - это просто.

Мой вопрос: как отсортировать и отобразить новые результаты? я думал о чем-то

1) взять все элементы tr в массив элементов jQuery.

2) по .each сортировать массив

3) удалить старый контент

4) .each loop - «добавлять» каждый TR в порядке появления в массив.

Есть ли лучший способ?

Answer 1

Ранее я писал эффективный алгоритм сортировки таблиц ( ответ ). Я настроил функцию для этого случая:

function sortTable(){
    var tbl = document.getElementById("myTable").tBodies[0];
    var store = [];
    for(var i=0, len=tbl.rows.length; i<len; i++){
        var row = tbl.rows[i];
        var sortnr = parseFloat(row.cells[2].textContent || row.cells[2].innerText);
        if(!isNaN(sortnr)) store.push([sortnr, row]);
    }
    store.sort(function(x,y){
        return x[0] - y[0];
    });
    for(var i=0, len=store.length; i<len; i++){
        tbl.appendChild(store[i][1]);
    }
    store = null;
}

Чтобы отсортировать таблицу, используйте `sortTable ();

Пояснение к коду:

1. Создаются две переменные: HTMLTableSectionElement tbl и Массив store.
2. Цикл проходит по всем элементам tBody (= строки) и помещает новый массив в store, состоящий из двух элементов: [sortnr, row].
   sortnr содержит числовое значение второй ячейки строки, которая используется для функции сортировки (взгляд в будущее)
   row - это ссылка на HTMLTableRowElement , используемая позже для перемещения строк.
3. store.sort(..) сортирует массив store в соответствии с sortnr (как определено выше, # 2 этого объяснения).
4. Цикл проходит по отсортированному массиву и добавляет строки в конец таблицы (tbl.appendChild перемещает узел из предыдущего местоположения)

Обратите внимание, что элементы, которые не имеют действительного номера в 3-м столбце (индекс ячейки 2), вообще не перемещаются. Они остаются наверху стола.

Если вы хотите, чтобы неверные строки располагались в конце, используйте:

for(var i=store.length-1; i>=0; i--){
    tbl.insertBefore(store[i][1], tbl.rows[0]);
}

Вопрос от Ройи Намира ( в комментариях )

ты человек. просто еще один вопрос: вы написали 'tbl.appendChild перемещает узел из предыдущего местоположения ', и я сам себе что действие - это appendChild - но за кулисами оно перемещается (!) элемент. Я читал об этом, и они сказали, что если это тот же объект затем он переехал. но откуда он знает, что это тот же объект? он не имеет идентификатора или что-то, что можно распознать ...

Ответ :
(Пример из реальной жизни:) Скажем, вы видите яблоко, лежащее на столе. Если вы хотите, чтобы это же яблоко было на полу, что бы вы сделали? возьмите яблоко и положите его на пол .

То же самое относится и к appendChild: когда вы запрашиваете добавление узла, механизм сценариев хочет разместить узел, который нужно поместить в дерево. Следовательно, предыдущий узел будет удален, потому что " appendChild не не копирует узлов. "
Для копирования узлов существует функция element.cloneNode().

Answer 2

Если, например, вы хотите, чтобы ваша таблица располагалась в алфавитном порядке по строкам, и каждая вторая строка была бесполезным партнером предыдущего (или не содержала соответствующих данных) - вы могли бы сделать это (вариант ответа Роба В.)).

function sortTable(){
    var tbl = document.getElementsByTagName('table')[1].tBodies[1]; // magic numbers are bad
    var store = [];
    var len = tbl.rows.length / 2; // Assumes even rows. Loops become invalid otherwise.

    for(var i=0; i<len; i++){
        var row = tbl.rows[2*i];
        var sortnr = (row.cells[1].textContent || row.cells[1].innerText || row.cells[1].innerHTML);
        store.push([sortnr, row, tbl.rows[(2*i) + 1]]);
    }

    store.sort(function(a, b){
        a = a[0].toLowerCase(); // make sort case insensitive (waste resources?)
        b = b[0].toLowerCase();
        if (a < b)
           return -1 
        if (a > b)
           return 1
        return 0
    });

    for(var i=0, len=store.length; i<len; i++){
        tbl.appendChild(store[i][1]); // sorted line
        tbl.appendChild(store[i][2]); // its partner
    }

    store = null;
}

sortTable();