隐藏/显示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';
