隐藏/显示HTML表格中的列

我有一个有几列的HTML表,我需要实现一个使用jQuery的列select器。 当用户点击checkbox时,我想隐藏/显示表格中的相应列。 我想这样做,而不附加一个类到表中的每个td,有没有办法使用jQueryselect整个列? 下面是一个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附加一个类

就我个人而言,我会采用class-on-each-td / th / col方法。 然后,您可以使用对容器上的className的单个写入来打开和closures列,假定样式规则如下所示:

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

这将比任何JS循环方法更快; 对于真正长的表格,它可以对响应性做出重大改变。

如果你不能支持IE6,你可以使用邻接select器来避免将类属性添加到tds。 或者,如果您关心的是使标记更清晰,则可以在初始化步骤中自动从JavaScript中添加它们。

一行代码使用隐藏第二列的jQuery:

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

如果你的表有头(th),使用这个:

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

来源: 使用单行jQuery代码隐藏表格列

jsFiddletesting代码: http : //jsfiddle.net/mgMem/1/


如果你想看一个很好的用例,看一下我的博客文章:

使用jQuery隐藏表格列并根据值对行进行着色 。

你可以使用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>类。

以下应该做到这一点:

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

这是未经testing的代码,但其原理是在每行中select对应于从checkbox名称中提取的所选索引的表格单元格。 你当然可以限制select器的类或ID。

当然, 支持 nth-child 浏览器只有CSS:

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

这是为IE9和更新的。

对于你的用例,你需要几个类来隐藏列:

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

等…

以下是基于Eran的代码,只做了一些小改动。 testing它,它似乎在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> 
 <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> 

没有课堂? 您可以使用标签,然后:

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

并向他们展示使用:

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