我有一个表格,我想根据顶部的复选框动态隐藏/显示其中的行。
我想在没有 jQuery 的情况下做到这一点,只是香草 Javascript。
我在这个网站和其他网站上看到了很多方法,但总是代码片段,而不是完整的工作示例。
我不想给每一行一个单独的 div 名称,或者其他什么,我假设有一种方法可以用一个通用类来处理我想要隐藏/显示的 3 种类型的行。
谁能给我看一个工作示例,该示例允许复选框使用 vanilla Javascript 隐藏/显示表格中的多行?
我有一个表格,我想根据顶部的复选框动态隐藏/显示其中的行。
我想在没有 jQuery 的情况下做到这一点,只是香草 Javascript。
我在这个网站和其他网站上看到了很多方法,但总是代码片段,而不是完整的工作示例。
我不想给每一行一个单独的 div 名称,或者其他什么,我假设有一种方法可以用一个通用类来处理我想要隐藏/显示的 3 种类型的行。
谁能给我看一个工作示例,该示例允许复选框使用 vanilla Javascript 隐藏/显示表格中的多行?
给定 HTML,如下所示:
<table>
<thead>
<tr>
<td>
<label>
<input type="checkbox" class="show" value="north" checked />North</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" class="show" value="south" checked />South
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" class="show" value="outOfArea" checked />Out of area
</label>
</td>
</tr>
</thead>
<tbody>
<tr class="north">
<td>North One</td>
</tr>
<tr class="north">
<td>North Two</td>
</tr>
<tr class="outOfArea">
<td>Out-of-area One</td>
</tr>
<tr class="south">
<td>South One</td>
</tr>
<tr class="south">
<td>South Two</td>
</tr>
<tr class="north">
<td>North Three</td>
</tr>
<tr class="north">
<td>North Four</td>
</tr>
<tr class="south">
<td>South Three</td>
</tr>
<tr class="outOfArea">
<td>Out-of-area Two</td>
</tr>
</tbody>
</table>
以下 jQuery 似乎正如您所描述的那样:
$('thead input[type=checkbox]').change(function(){
var self = this;
$(self).closest('table').find('tbody tr').filter('.' + self.value).toggle(self.checked);
});
由于您似乎更喜欢纯 JavaScript 方法,我建议您采用以下方法(使用与上面发布的相同的 HTML):
function toggle (e) {
var self = e.target,
toggleClass = '.' + self.value,
toToggle = document.querySelectorAll(toggleClass);
for (var i = 0, len = toToggle.length; i < len; i++) {
toToggle[i].style.display = self.checked ? 'table-row' : 'none';
}
}
var thead = document.querySelector('thead');
thead.addEventListener('change', toggle);
参考:
看起来您正在按照此示例的方式描述某些内容