根据单击的元素隐藏/显示表格列

Question

我想创建某种类型的按钮，它只会显示受影响的表列并隐藏其他所有列，并向按钮添加/删除活动类，例如：

<a href="#" class="btn active" id="fruits">Data 1</a>
<a href="#" class="btn" id="vegetables">Data 2</a>
<a href="#" class="btn" id="nuts">Data 3</a>

<table>

    <thead>
        <tr>
            <th class="fruits">First column</th>
            <th class="vegetables">Second column</th>
            <th class="nuts">Third column</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="fruits">Test 1</td>
            <td class="vegetables">Test 2</td>
            <td class="nuts">Test 3</td>
        </tr>
    </tbody>

</table>

例如，当我单击“数据 2 ”按钮时，它会向其中添加“活动”类，隐藏每隔一列，只显示具有名为“蔬菜”类的项目。

我是初学者，我想知道这是否可能以及如何实现？ 谢谢你。

Answer 1

为了使一列处于活动状态，您需要找出所单击按钮的索引。 之后，您可以遍历标题和列以找出要显示或隐藏的内容。

下面的示例将仅显示单击按钮的单击列（ th和td ）。

更新：如果您想根据单击的字段显示/隐藏，您可以引用按钮 id 并定位每个表格单元格的类。

 Array.from(document.querySelectorAll('.buttons a')).forEach(a => { a.addEventListener('click', handleButtonClick); }); function handleButtonClick(e) { let selectedId = e.target.id; document.querySelectorAll('.buttons a').forEach((a) => { a.classList[a.id === selectedId ? 'add' : 'remove']('active'); }); document.querySelectorAll('table > thead > tr th').forEach(th => { th.style.display = th.classList.contains(selectedId) ? 'table-cell' : 'none'; }); document.querySelectorAll('table > tbody > tr td').forEach(td => { td.style.display = td.classList.contains(selectedId) ? 'table-cell' : 'none'; }); };

 .buttons a { display: inline-block; border: thin solid grey; padding: 0.25em 0.5em; text-decoration: none; background: #AAA; } .buttons a.active { background: #FFF; } table, th, td { border: thin solid grey; } table { border-collapse: collapse; margin-top: 1em; } th, td { padding: 0.25em; }

 <div class="buttons"> <a href="#" class="btn active" id="fruits">Fruits</a> <a href="#" class="btn" id="vegetables">Vegetables</a> <a href="#" class="btn" id="nuts">Nuts</a> </div> <table> <thead> <tr> <th class="fruits">Fruits</th> <th class="vegetables">Vegetables</th> <th class="nuts">Nuts</th> </tr> </thead> <tbody> <tr> <td class="fruits">Apple</td> <td class="vegetables">Artichoke</td> <td class="nuts">Almond</td> </tr> <tr> <td class="fruits">Banana</td> <td class="vegetables">Broccoli</td> <td class="nuts">Brazil Nut</td> </tr> <tr> <td class="fruits">Cherry</td> <td class="vegetables">Carrot</td> <td class="nuts">Cashew</td> </tr> </tbody> </table>

Answer 2

希望这适合你。
如果您需要在<table>上添加额外的类，则可能需要进行一些调整

 $(() => { // wait until DOM is ready $('.btn').click(function onclick() { // set up onclick handler for all buttons of class 'btn' // on click $('.btn').removeClass('active'); // remove 'active' class from all buttons $(this).toggleClass('active'); // but add 'active' class to the clicked one (this) $('table').attr('class', $(this).attr('id')) // finally set the table class to be the id of the clicked button }) })

 a.active { color: green } table .fruits { display: none } table .vegetables { display: none } table .nuts { display: none } table.fruits .fruits { display: table-cell } table.vegetables .vegetables { display: table-cell } table.nuts .nuts { display: table-cell }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#" class="btn" id="fruits" >Data 1</a> <a href="#" class="btn" id="vegetables">Data 2</a> <a href="#" class="btn" id="nuts" >Data 3</a> <table> <thead> <tr> <th class="fruits" >First column</th> <th class="vegetables">Second column</th> <th class="nuts" >Third column</th> </tr> </thead> <tbody> <tr> <td class="fruits" >Test 1</td> <td class="vegetables">Test 2</td> <td class="nuts" >Test 3</td> </tr> </tbody> </table>