在线浏览有关 Javascript 显示/隐藏的教程后,我只能找到所有列默认可见的示例。我正在寻找一种方法来默认隐藏一些列(并允许通过复选框打开它们)并默认显示一些列(并允许通过复选框关闭它们)。
这可能吗?
引用我的表结构如下:
<table>
<thead>
<tr>
<th>Name</th>
<th>Job</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mike</td>
<td>Dancer</td>
</tr>
</tbody>
</table>
最佳答案
纯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;
}
请考虑使用 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();
});
});
关于Javascript 默认隐藏列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10731693/