Javascript默认隐藏列

Question

在线浏览Javascript show/hide的教程后,我只能找到默认可见所有列的示例.我正在寻找一种方法来默认隐藏一些列(并允许它们通过复选框切换)并默认显示一些列(并允许通过复选框切换它们).

这可能吗？

作为参考我的表结构如下:

<table>
  <thead>
<tr>
  <th>Name</th>
  <th>Job</th>
</tr>
  </thead>
  <tbody>
    <tr>
      <td>Mike</td>
      <td>Dancer</td>
    </tr>
  </tbody>
</table>

Answer 1

纯javascript:

HTML

<input type="checkbox" onclick="showhide(1, this)" checked="checked" /> Name<br />
<input type="checkbox" onclick="showhide(3, this)" checked="checked" /> Job<br />

JS

function showhide(column, elem){
    if (elem.checked)
        dp = "table-cell";
    else
        dp = "none";
    tds = document.getElementsByTagName('tr');
    for (i=0; i<tds.length; i++)
        tds[i].childNodes[column].style.display = dp;
}

纯JS小提琴的例子

请考虑使用javascript库作为JQuery来处理这些琐碎的事情.你的代码可以很简单:

HTML

<input type="checkbox" data-col="1" checked="checked" /> Name<br />
<input type="checkbox" data-col="2" checked="checked" /> Job<br />

jQuery JS:

$(function(){
    $(':checkbox').on('change', function(){
        $('th, td', 'tr').filter(':nth-child(' + $(this).data('col') + ')').toggle();
    });
});

jQuery小提琴的例子