"Нормализовать" HTML-таблицу с rowspan
Есть ли способ определить или рассчитать, можно ли и как нормализовать таблицу HTML с помощью строк? Или, если есть библиотека JavaScript, которая может это сделать.
Например, эта таблица:
+-----------+---------+
| Apple | Red |
| Apple | Green |
| Apple | Yellow |
| Sun | Yellow |
| Sun | Hot |
| Charizard | Hot |
| Charizard | Pokémon |
+-----------+---------+
Будет превращено в это:
+-----------+---------+
| Apple | Red |
| | Green |
| |---------|
|-----------| Yellow |
| Sun |-------- |
|-----------| Hot |
| |---------|
| Charizard | Pokémon |
+-----------+---------+
Посмотрите на эту скрипку, чтобы понять, что я имею в виду: http://jsfiddle.net/scorch/LZKkQ/
Некоторые из этих комбинаций легко определить вручную, но некоторые могут быть довольно сложными. Я хотел бы максимально уменьшить таблицу и быть уверенным, что нет другой комбинации, которая могла бы свести ее к минимуму. Т.е. желательно только уникальные значения в таблице.
РЕДАКТИРОВАТЬ: не берите в голову дополнительную колонку в скрипке. Кажется, у Firefox есть некоторые проблемы с rowspan в самом правом столбце, поэтому мне пришлось добавить еще один, чтобы он имел желаемый эффект.
РЕДАКТИРОВАТЬ 2:
Упомянутые ниже подключаемые fnMultiRowspan
DataTables fnMultiRowspan
и fnFakeRowspan
не дают желаемых результатов. Оба плагина нуждаются в правильной сортировке таблицы, чтобы они работали; fnFakeRowspan
работает только для одного столбца, а fnMultiRowspan
дает следующий результат (горячие и желтые дублируются во втором столбце):
+-----------+---------+
| | Red |
| Apple | Green |
| | Yellow |
|-----------+---------|
| Charizard | Hot |
| | Pokémon |
|-----------+---------|
| Sun | Yellow |
| | Hot |
+-----------+---------+
Ответы
Ответ 1
Как упоминалось выше в комментарии @MahmoudGamal, есть плагин для jQuery, называемый DataTables, который может быть полезен. Проверьте fnFakeRowspan:
Создает ячейки rowspan в столбце, когда есть две или более ячейки в строке с одним и тем же контентом, эффективно группируя их визуально. Примечание. Этот плагин в настоящее время работает корректно только с серверной обработкой.
Основываясь на быстром чтении кода, похоже, что вы указываете столбец, затем он ищет дубликаты и объединяет ячейки по мере необходимости. (Примечание: я сам не пробовал этот код.)
Ответ 2
было бы просто написать его самостоятельно, если вы достаточно разбираетесь в JavaScript. Все, что вам нужно сделать, это проверить, совпадает ли следующая строка с текущей строкой, а затем просто увеличить высоту одного, а не печатать дважды.
Изменить: вы хотите, чтобы это закончилось как
+-----------+---------+
| Apple | Red |
| Pokémon | Green |
| Sun | Yellow |
| Charizard | Hot |
+-----------+---------+