У меня есть HTML-таблица с несколькими столбцами, и мне нужно реализовать выбор столбца с помощью jquery. Когда пользователь нажимает на флажок, я хочу скрыть / показать соответствующий столбец в таблице. Я хотел бы сделать это без привязки класса к каждому тд в таблице, есть ли способ выбрать весь столбец с помощью jquery? Ниже приведен пример HTML.
<table>
<thead>
<tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th></tr>
</thead>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
<tr><td>Column1</td><td>Column2</td><td>Column3</td></tr>
</table>
<form>
<input type="checkbox" name="col1" checked="checked" /> Hide/Show Column 1 <br />
<input type="checkbox" name="col2" checked="checked" /> Hide/Show Column 2 <br />
<input type="checkbox" name="col3" checked="checked" /> Hide/Show Column 3 <br />
</form>
Ответы:
Лично я бы пошел с подходом класса на каждый td / th / col. Затем вы можете включать и выключать столбцы, используя одну запись в className контейнера, предполагая правила стиля, такие как:
Это будет быстрее, чем любой подход JS-цикла; для действительно длинных таблиц это может существенно повлиять на отзывчивость.
Если вы можете обойтись без поддержки IE6, вы можете использовать селекторы смежности, чтобы избежать необходимости добавлять атрибуты класса в tds. Или же, если ваша задача состоит в том, чтобы сделать разметку более чистой, вы можете автоматически добавить их из JavaScript на этапе инициализации.
источник
.hidden {display:none;}
и использовал,.addClass('hidden')
и.removeClass('hidden')
это было немного быстрее, чем.hide()
и.show()
.Одна строка кода с использованием jQuery, которая скрывает 2-й столбец:
Если ваша таблица имеет заголовок (th), используйте это:
Источник: Скрыть столбец таблицы с одной строкой кода jQuery
jsFiddle для проверки кода: http://jsfiddle.net/mgMem/1/
Если вы хотите увидеть хороший вариант использования, взгляните на мой блог:
Скройте столбец таблицы и раскрасьте строки в зависимости от значения с помощью jQuery .
источник
Вы могли бы использовать colgroups:
тогда ваш сценарий может изменить только
<col>
класс желаний .источник
$('table > colgroup > col.yourClassHere')
селектор jQuery, вы все равно можете установить что-то вроде цвета фона всего столбца, но вы больше не сможете переключать видимость столбца. Были протестированы следующие браузеры: MSIE 11 , Safari 5 , Chromium 44 , Opera 12 , Mozilla SeaMonkey 2.40 , Mozilla Firefox 43 . «Большинство атрибутов в HTML 4.01 не поддерживаются в HTML5» - смотрите здесь .Следующие должны сделать это:
Это непроверенный код, но принцип заключается в том, что вы выбираете ячейку таблицы в каждой строке, которая соответствует выбранному индексу, извлеченному из имени флажка. Конечно, вы можете ограничить селекторы классом или идентификатором.
источник
Вот немного более полнофункциональный ответ, который обеспечивает некоторое взаимодействие с пользователем для каждого столбца. Если это будет динамический опыт, то для каждого столбца должен быть активируемый переключатель, который указывает на возможность скрыть столбец, а затем способ восстановить ранее скрытые столбцы.
Это будет выглядеть примерно так в JavaScript:
Чтобы поддержать это, мы добавим некоторую разметку в таблицу. В заголовок каждого столбца мы можем добавить что-то вроде этого, чтобы обеспечить визуальный индикатор чего-то интерактивного
Мы позволим пользователю восстанавливать столбцы по ссылке в нижнем колонтитуле таблицы. Если он не является постоянным по умолчанию, то его динамическое переключение в заголовке может толкаться вокруг таблицы, но вы действительно можете поместить его в любое место:
Это основная функциональность. Ниже приведена демоверсия с еще несколькими подробностями. Вы также можете добавить всплывающую подсказку к кнопке, чтобы прояснить ее назначение, придать кнопке более органичный стиль для заголовка таблицы и свернуть ширину столбца, чтобы добавить некоторые (несколько странные) анимации CSS, чтобы сделать переход немного меньше. дрожать.
Рабочая демонстрация в jsFiddle & Stack Snippets :
Показать фрагмент кода
источник
$(document).ready
но.hide-col
для удаления столбцов, но его также можно использовать для указания состояния, так что вы можете добавить - добавить.hide-col
к каждомуtd
&tr
при рендеринге html и все готово. Или, если вы хотите добавить его в меньшее количество мест, поместите его в заголовок (это состояние должно куда-то идти) и в init используйте это, чтобы скрыть индекс столбца среди дочерних элементов. В настоящее время код просто прослушивает позицию при щелчке, но он может быть изменен для поиска позиции класса. Кроме того, счастливого дня индейкиclass='hide-col'
куда угодно в свой html-код (возможно, в этомthead > tr > th
есть смысл, и он подберет, чтобы убедиться, что он скрывает все ячейки в этом столбце и также динамически отображает нижний колонтитул восстановленияИ, конечно же, CSS единственный способ для браузеров, которые поддерживают
nth-child
:table td:nth-child(2) { display: none; }
Это для IE9 и новее.
Для вашего варианта использования вам понадобится несколько классов, чтобы скрыть столбцы:
ЭСТ ...
источник
Ниже приводится код Eran с небольшими изменениями. Протестировал его и, похоже, он отлично работает на Firefox 3, IE7.
источник
источник
Без класса? Вы можете использовать тег тогда:
И чтобы показать им, используйте:
источник