Скрыть / Показать столбец в таблице HTML

146

У меня есть 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>
Брайан Фишер
источник
2
Я надеюсь , что на следующие веб - сайт поможет: fiendish.demon.co.uk/html/javascript/hidetablecols.html
Я реализовал это решение с помощью jQuery, и оно отлично сработало для меня: http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html
Аарон,
1
Согласно комментарию пользователя 344059, здесь есть веб-архив с неработающей ссылкой http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html
KyleMit

Ответы:

84

Я хотел бы сделать это, не привязывая класс к каждому тд

Лично я бы пошел с подходом класса на каждый td / th / col. Затем вы можете включать и выключать столбцы, используя одну запись в className контейнера, предполагая правила стиля, такие как:

table.hide1 .col1 { display: none; }
table.hide2 .col2 { display: none; }
...

Это будет быстрее, чем любой подход JS-цикла; для действительно длинных таблиц это может существенно повлиять на отзывчивость.

Если вы можете обойтись без поддержки IE6, вы можете использовать селекторы смежности, чтобы избежать необходимости добавлять атрибуты класса в tds. Или же, если ваша задача состоит в том, чтобы сделать разметку более чистой, вы можете автоматически добавить их из JavaScript на этапе инициализации.

bobince
источник
7
Спасибо за совет, я хотел сохранить чистоту HTML, но производительность определенно стала проблемой, так как размер таблицы приблизился к 100 строкам. Это решение обеспечило повышение производительности в 2-5 раз.
Брайан Фишер
2
Этот подход творил чудеса для меня, с точки зрения производительности. Спасибо!
axelarge
4
Я добавил это к моей CSS .hidden {display:none;}и использовал, .addClass('hidden')и .removeClass('hidden')это было немного быстрее, чем .hide()и .show().
Styfle 28.12.12
247

Одна строка кода с использованием jQuery, которая скрывает 2-й столбец:

$('td:nth-child(2)').hide();

Если ваша таблица имеет заголовок (th), используйте это:

$('td:nth-child(2),th:nth-child(2)').hide();

Источник: Скрыть столбец таблицы с одной строкой кода jQuery

jsFiddle для проверки кода: http://jsfiddle.net/mgMem/1/


Если вы хотите увидеть хороший вариант использования, взгляните на мой блог:

Скройте столбец таблицы и раскрасьте строки в зависимости от значения с помощью jQuery .

Лениэль Маккаферри
источник
1
Кроме того, как они не в примере, нет ли проблемы, что это игнорирует colspans? Хорошо, если вы их не используете. Есть еще один вопрос: stackoverflow.com/questions/1166452/…
Ким Р
2
Мне пришлось добавить tbody к селектору, чтобы избежать скрытия нижнего колонтитула с помощью пейджера: $ ('. Webgrid tbody td: nth-child (1), .webgrid th: nth-child (1)'). Hide ();
Алекс
@KimR Это может помочь при проблемах colspan stackoverflow.com/questions/9623601/…
yunzen
Я не знаю точно, почему, но мне пришлось вместо этого использовать nth-of-type, чтобы это работало. Например: $ ('table td: nth-of-type (2)'). Hide ();
Леопольдо Санчик
@ LeopoldoSanczyk вы использовали Safari? Похоже, что ему нужно nth-of-type
ykay говорит восстановить Monica
12

Вы могли бы использовать colgroups:

<table>
    <colgroup>
       <col class="visible_class"/>
       <col class="visible_class"/>
       <col class="invisible_class"/>  
    </colgroup>
    <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>

тогда ваш сценарий может изменить только <col>класс желаний .

Луис Мелгратти
источник
Кажется, я помню, что у colgroup не было поддержки кросс-браузеров, разве это не правда?
Брайан Фишер
Может быть. Я использую этот метод для подсветки столбцов (Firefox, Safari, Chrome работает отлично) никогда не пробовал в IE.
Луис Мелгратти
@Brian - IE8 не работает и IE8 с включенным IE7, похоже, работает.
Нордес
4
Кажется, это больше не работает в современном браузере (Chrome и Firefox)
JBE
@JBE: быть точным, это делает работу в современных браузерах , в некоторой степени . Используя $('table > colgroup > col.yourClassHere')селектор jQuery, вы все равно можете установить что-то вроде цвета фона всего столбца, но вы больше не сможете переключать видимость столбца. Были протестированы следующие браузеры: MSIE 11 , Safari 5 , Chromium 44 , Opera 12 , Mozilla SeaMonkey 2.40 , Mozilla Firefox 43 . «Большинство атрибутов в HTML 4.01 не поддерживаются в HTML5» - смотрите здесь .
Бас
11

Следующие должны сделать это:

$("input[type='checkbox']").click(function() {
    var index = $(this).attr('name').substr(2);
    $('table tr').each(function() { 
        $('td:eq(' + index + ')',this).toggle();
    });
});

Это непроверенный код, но принцип заключается в том, что вы выбираете ячейку таблицы в каждой строке, которая соответствует выбранному индексу, извлеченному из имени флажка. Конечно, вы можете ограничить селекторы классом или идентификатором.

Эран Гальперин
источник
11

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

Это будет выглядеть примерно так в JavaScript:

$('.hide-column').click(function(e){
  var $btn = $(this);
  var $cell = $btn.closest('th,td')
  var $table = $btn.closest('table')

  // get cell location - https://stackoverflow.com/a/4999018/1366033
  var cellIndex = $cell[0].cellIndex + 1;

  $table.find(".show-column-footer").show()
  $table.find("tbody tr, thead tr")
        .children(":nth-child("+cellIndex+")")
        .hide()
})

$(".show-column-footer").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".show-column-footer").hide()
    $table.find("th, td").show()

})

Чтобы поддержать это, мы добавим некоторую разметку в таблицу. В заголовок каждого столбца мы можем добавить что-то вроде этого, чтобы обеспечить визуальный индикатор чего-то интерактивного

<button class="pull-right btn btn-default btn-condensed hide-column" 
            data-toggle="tooltip" data-placement="bottom" title="Hide Column">
    <i class="fa fa-eye-slash"></i>  
</button>

Мы позволим пользователю восстанавливать столбцы по ссылке в нижнем колонтитуле таблицы. Если он не является постоянным по умолчанию, то его динамическое переключение в заголовке может толкаться вокруг таблицы, но вы действительно можете поместить его в любое место:

<tfoot class="show-column-footer">
   <tr>
    <th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
  </tr>
</tfoot>

Это основная функциональность. Ниже приведена демоверсия с еще несколькими подробностями. Вы также можете добавить всплывающую подсказку к кнопке, чтобы прояснить ее назначение, придать кнопке более органичный стиль для заголовка таблицы и свернуть ширину столбца, чтобы добавить некоторые (несколько странные) анимации CSS, чтобы сделать переход немного меньше. дрожать.

Демо Скриншот

Рабочая демонстрация в jsFiddle & Stack Snippets :

KyleMit
источник
Вы прячете ближайший 1 столбец, как скрыть ближайший 3 столбец?
Нирмал Госвами
проверьте мою таблицу - i.stack.imgur.com/AA8iZ.png и вопрос, содержащий таблицу html - stackoverflow.com/questions/50838119/… кнопка появится после A, B и C
Нирмал Госвами
Извините, что оживил такой старый ответ, но есть ли простой способ установить некоторые столбцы скрытыми по умолчанию? Я пытаюсь сделать это с, $(document).readyно
безуспешно
1
@RobotJohnny, хороший вопрос. Это использует класс .hide-colдля удаления столбцов, но его также можно использовать для указания состояния, так что вы можете добавить - добавить .hide-colк каждому td& trпри рендеринге html и все готово. Или, если вы хотите добавить его в меньшее количество мест, поместите его в заголовок (это состояние должно куда-то идти) и в init используйте это, чтобы скрыть индекс столбца среди дочерних элементов. В настоящее время код просто прослушивает позицию при щелчке, но он может быть изменен для поиска позиции класса. Кроме того, счастливого дня индейки
KyleMit
1
@RobotJohnny, я обновил пример кода, чтобы включить обработку инициализации. Просто вставьте class='hide-col'куда угодно в свой html-код (возможно, в этом thead > tr > thесть смысл, и он подберет, чтобы убедиться, что он скрывает все ячейки в этом столбце и также динамически отображает нижний колонтитул восстановления
KyleMit
4

И, конечно же, CSS единственный способ для браузеров, которые поддерживают nth-child :

table td:nth-child(2) { display: none; }

Это для IE9 и новее.

Для вашего варианта использования вам понадобится несколько классов, чтобы скрыть столбцы:

.hideCol1 td:nth-child(1) { display: none;}
.hideCol2 td:nth-child(2) { display: none;}

ЭСТ ...

ProblemsOfSumit
источник
2

Ниже приводится код Eran с небольшими изменениями. Протестировал его и, похоже, он отлично работает на Firefox 3, IE7.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<script>
$(document).ready(function() {
    $('input[type="checkbox"]').click(function() {
        var index = $(this).attr('name').substr(3);
        index--;
        $('table tr').each(function() { 
            $('td:eq(' + index + ')',this).toggle();
        });
        $('th.' + $(this).attr('name')).toggle();
    });
});
</script>
<body>
<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>
</body>
</html>
Паоло Бергантино
источник
1
<p><input type="checkbox" name="ch1" checked="checked" /> First Name</p>
.... 
<td class="ch1">...</td>

 <script>
       $(document).ready(function() {
            $('#demo').multiselect();
        });


        $("input:checkbox:not(:checked)").each(function() {
    var column = "table ." + $(this).attr("name");
    $(column).hide();
});

$("input:checkbox").click(function(){
    var column = "table ." + $(this).attr("name");
    $(column).toggle();
});
 </script>
lahbib
источник
0

Без класса? Вы можете использовать тег тогда:

var tds = document.getElementsByTagName('TD'),i;
for (i in tds) {
  tds[i].style.display = 'none';
}

И чтобы показать им, используйте:

...style.display = 'table-cell';            
Густаво Руис
источник