Как скрыть столбцы таблицы в jQuery?
У меня есть таблица с большим количеством столбцов. Я хочу дать пользователям опцию выбрать столбцы, которые будут показаны в таблице. Эти опции были бы флажками наряду с именами столбцов. Таким образом, как я могу скрыться/раскрыть столбцы таблицы на основе флажков?
Был бы, скрываясь (использующий .hide ()) каждый td в каждой работе строки? Может быть я могу присвоить значение флажка местоположению столбца в таблице. Таким образом, первый флажок означает первый столбец и так далее. И затем рекурсивно скройтесь, который 'пронумеровал' td в каждой строке. Это работало бы?
2 ответа
Попробуйте:
function hideColumn(columnIndex) {
$('#mytable td:nth-child('+(columnIndex+1)+')').hide();
}
Это довольно простая версия - в ней предполагается, что ваша таблица не использует элементы Я создал сценарий, который делает то, что предлагает Рекс. В каждом столбце есть флажок (или элемент), который при нажатии определяет, в каком столбце он находится, на основе n-го дочернего элемента, а затем скрывает те же столбцы друг в друге TR. Перед .hide () я бы добавил класс, на который можно было бы ссылаться, чтобы вернуть столбец. Проблема, с которой я столкнулся, заключалась в том, что я работал с сильно стилизованными таблицами, в которых некоторые строки имели colspans, а некоторые TD имели уникальные классы в зависимости от их положения в строке. Я разглагольствовал о проблемах в IE, где IE не всегда показывал () скрытые TD с правильным стилем. Похоже, у IE возникли проблемы с перерисовкой TD. и не имеет переменной ширины столбцов, но основная концепция присутствует. Обратите внимание, что nth-child использует индексирование на основе 1 . Я добавил 1 на последнем этапе, чтобы это компенсировать.
Похожие вопросы: