Javascript 默认隐藏列

Question

在线浏览有关 Javascript 显示/隐藏的教程后，我只能找到所有列默认可见的示例。我正在寻找一种方法来默认隐藏一些列(并允许通过复选框打开它们)并默认显示一些列(并允许通过复选框关闭它们)。

这可能吗？

引用我的表结构如下:

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

Pure JS fiddle example

请考虑使用 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 Fiddle example