Как скрыть столбцы таблицы в jQuery?

Question

У меня есть таблица с множеством столбцов. Я хочу дать пользователям возможность выбрать столбцы для отображения в таблице. Эти параметры будут флажками вместе с именами столбцов. Итак, как я могу скрыть / показать столбцы таблицы на основе флажков?

Будет ли работать скрытие (с помощью .hide ()) каждого тд в каждой строке? Может быть, я могу назначить значение флажка для расположения столбца в таблице. Итак, первый флажок означает первый столбец и так далее. А затем рекурсивно скрыть этот «пронумерованный» тд в каждом ряду. Будет ли это работать?

Answer 1

Попробуйте:

function hideColumn(columnIndex) {
    $('#mytable td:nth-child('+(columnIndex+1)+')').hide();
}

Это довольно базовая версия - предполагается, что ваша таблица не использует <TH> элементов или не имеет переменных диапазонов столбцов, но базовая концепция есть. Обратите внимание, что nth-child использует индексирование на основе 1 . Я добавил 1 на последней стадии, чтобы компенсировать это.

Answer 2

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

Before .hide ()Я бы добавил класс, на который мог бы сослаться, чтобы вернуть столбец.

Проблема, с которой я столкнулся, заключалась в том, что я работал с сильно стилизованными таблицами, где некоторые строки имели кольспаны, а некоторые TD имели уникальные классы, основанные на их положении в строке.Я сталкиваюсь с проблемами в IE, где IE не всегда показывает () скрытые TD с правильным стилем.Казалось, у IE были проблемы с перерисовкой TD.