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

У меня есть таблица HTML с несколькими столбцами, и мне нужно реализовать выборку столбцов с помощью jquery. Когда пользователь нажимает на флажок, я хочу скрыть/показать соответствующий столбец в таблице. Я хотел бы сделать это без привязки класса к каждому td в таблице, есть ли способ выбрать весь столбец с помощью 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>

Ответ 1

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

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

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

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

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

Ответ 2

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

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

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

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

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

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

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

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

Ответ 3

вы можете использовать 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>

ваш script мог бы изменить только класс желания <col>.

Ответ 4

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

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

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

Ответ 5

И, конечно, только 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;}

ЭСТ...

Ответ 6

Следующее построено на коде 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>

Ответ 7

<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>

Ответ 8

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

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

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

...style.display = 'table-cell';