Как подавить отображение повторяющихся значений в HTML-таблицах, которые можно отсортировать?

Question

У меня есть таблица в HTML, которую я генерирую из XML / XSL, и я хочу, чтобы она подавляла повторяющиеся значения. Тем не менее, я также хочу отсортировать его на лету, нажав на названия.

Без обращения к серверу мне нужно подавлять разные значения после каждой сортировки. Есть хорошее решение javascript / css.

Например

Данные

Date  Person Score  
May   Jeff   1  
May   Joel   2  
June  Alex   1

Начальное отображение
Обратите внимание на отсутствие второго мая

Date  Person Score  
May   Jeff   1  
      Joel   2  
June  Alex   1

Показать после сортировки по баллам
Обратите внимание на отсутствие второго 1

Date  Person Score  
May   Joel   2  
June  Alex   1
May   Jeff     

Answer 1

Лично я бы использовал что-то вроде jQuery Table Sorter . Вы также можете использовать функцию unique () для удаления дубликатов. Использование jQuery делает работу намного проще, чем использование JS. Либо это, либо я бы использовал JSF для моего уровня представления, который уже поставляется с функциональностью только для таких случаев.

Я действительно не знаю "хорошего" способа сделать это с JS. Каждая реализация в JS, которую я когда-либо видел, грязная. Добавление jQuery в ваш проект избавит вас от необходимости писать неприятный код JS.

Answer 2

Имейте функцию javascript, перебирающую соответствующие столбцы таблицы и удаляющую значения, которые были такими же, как и раньше. Вы также можете добавить атрибут rowspan в первую ячейку с этим значением, чтобы семантика таблицы была правильной.

Это не совсем работа для CSS, так как она обрабатывает информацию, а не просто отображает вещи (плюс это будет очень сложно).

Answer 3

Проверьте мой плагин для таблиц: jquery.tablesorter.deduper.js . Это не удаление самого значения, а добавление класса CSS к дублированным значениям, поэтому результат будет аналогичным (вы можете скрыть его).

Вот пример

Answer 4

Я бы порекомендовал установить класс на td с повторяющимися значениями, чтобы скрыть их, чтобы вы не потеряли данные. Вы можете перебрать каждую ячейку в столбце, сравнивая ее с последней, и, если она одинакова, добавить в нее класс «duplicate».

function after_sort(sort_column) {
    clear_duplicate_classes();

    var last = null;
    for (var i = 0; i < trs.length; i++) {
        var td = get_nth_td(trs[i], sort_column);
        if (td.innerHTML === last) {
            add_duplicate_class(td);
        }
        else {
            last = td.innerHTML;
        }
    }
}

Если вы используете библиотеку типа jQuery, она будет выглядеть так:

function after_sort(table, sort_column) {
    $(table).find(".duplicate").removeClass("duplicate");

    var last = null;
    $(table).find("tr").each(function() {
        var td = $(this).find("td").get(sort_column); // doesn't account for colspan
        if (td.innerHTML === last) {
            $(td).addClass("duplicate");
        }
        else {
            last = td.innerHTML;
        }
    });
}

Они полностью не проверены, поэтому я, возможно, что-то пропустил. Используйте на свой страх и риск и т. Д.