0

上部のチェックボックスに基づいて、行を動的に非表示/表示したいテーブルがあります。

jQuery を使用せずに、バニラ Javascript だけでこれを行いたいと思います。

このサイトや他のサイトで多数の方法を見てきましたが、常にコードのスニペットであり、完全に機能する例ではありません。

各行に個別のdiv名などを付けたくありません。非表示/表示したい3種類の行に共通のクラスでこれを行う方法があると仮定しています。

チェックボックスがバニラJavascriptを使用してテーブルから複数の行を非表示/表示できるようにする実際の例を誰かに見せてもらえますか?

4

2 に答える 2

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 フィドルのデモ

プレーンな 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 フィドルのデモ

参考文献:

于 2013-08-12T16:49:11.820 に答える