复选框隐藏表格中的行组

Question

我有一个表格，我想根据顶部的复选框动态隐藏/显示其中的行。

我想在没有 jQuery 的情况下执行此操作，只需使用原生 Javascript。

我在这个站点和其他站点上看到了许多方法，但总是对代码进行 sn-ps，而不是完整的工作示例。

我不想给每一行一个单独的 div 名称，或者其他什么，我假设有一种方法可以使用一个通用类来为我想要隐藏/显示的 3 种类型的行执行此操作。

谁能给我看一个工作示例，它允许复选框使用 vanilla Javascript 隐藏/显示表格中的多行？

Answer 1

给定 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);
});

JS Fiddle demo.

您似乎更喜欢纯 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);

JS Fiddle demo.

参考资料：

• jQuery:
  • Attribute-equals ([attribute="value"]) selector。
  • change()。
  • closest()。
  • find()。
  • filter()。
  • toggle()。
• 纯 JavaScript：
  • document.querySelector()。
  • document.querySelectorAll()。
  • EventTarget.addEventListener()。

Answer 2

看起来你在描述类似this example 的东西