Сортируемая HTML-таблица с многорядным заголовком

#javascript #html #sorting

#javascript #HTML #сортировка

Вопрос:

Существует несколько JS-скриптов, которые могут сортировать столбцы HTML-таблицы, например, этот: http://www.kryogenix.org/code/browser/sorttable /

Но все они, похоже, работают, если ваш (фиксированные строки заголовка) равен 1 строке. У меня есть 3 строки, вверху есть категории, а внизу — подкатегории с разбивкой, примерно так:

 ---------------------------------------------------------------------------------
| Category 1                               | Category 2                         |
| Sub cat 1 | Sub cat 2 | Sub cat 3        | Sub cat 4 | Sub cat 5              |
| data      | data      | data             | data      | data                   |
  

Итак, мой вопрос в том, есть ли скрипт, который может сортировать строки таблицы HTML на основе самой нижней строки.

Итак, в примере я хотел бы отсортировать данные на основе вложенных категорий.

Ответ №1:

Спасибо за ответ Аджая (недостаточно репутации для прямого голосования). У меня это сработало. Чтобы немного прояснить его / ее ответ в случае изменения номеров строк…

Вот строка 53 для закомментирования:

 if (table.tHead.rows.length != 1) return; // can't cope with two header rows
  

и это строка 78

 headrow = table.tHead.rows[0].cells;
  

заменяется на

 rowsinheader = table.tHead.rows.length;
headrow = table.tHead.rows[rowsinheader-1].cells;   //sort on the last row in header
  

Ответ №2:

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

Комментарии:

1. Спасибо, я тоже это видел, надеялся, что это будет возможно с чем-то таким же простым, как тот, с которым я связался. Мне не нужны какие-либо причудливые функции.

Ответ №3:

Я столкнулся с той же ситуацией, используя https://kryogenix.org/code/browser/sorttable / и я смог изменить sorttable.js очень легко это исправить. Внесены изменения:

  1. Строка 53: закомментируйте строку.
  2. Строка 78: замените строку 78 следующими двумя строками:
     rowsinheader = table.tHead.rows.length;
    headrow = table.tHead.rows[rowsinheader-1].cells;   //sort on the last row in header