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

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

<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>

第一列
第二列
第三纵队
测试1
测试2
测试3

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

---

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

要激活列，您需要计算单击按钮的索引。之后，您可以遍历标题和列，以确定要显示或隐藏哪些标题和列

下面的示例仅显示单击按钮的单击列（

th

和

td

）

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

Array.from（document.querySelectorAll（'.buttons a'））.forEach（a=>{
a、 addEventListener（“单击”，把手按钮单击）；
});
功能手柄按钮点击（e）{
让我们选择edid=e.target.id；
document.querySelectorAll（'.buttons a'）.forEach（（a）=>{
a、 classList[a.id==selectedId？'add'：'remove']（'active'）；
});
document.queryselectoral（'table>thead>trth'）.forEach（th=>{
th.style.display=th.classList.contains（selectedId）？“表格单元格”：“无”；
});
document.querySelectorAll（'table>tbody>trtd'）.forEach（td=>{
td.style.display=td.classList.contains（selectedId）？“表格单元格”：“无”；
});
};
。按钮a{
显示：内联块；
边框：薄实灰色；
填充：0.25em 0.5em；
文字装饰：无；
背景：#AAA；
}
.按钮a.激活{
背景：#FFF；
}
表，th，td{
边框：薄实灰色；
}
桌子{
边界塌陷：塌陷；
边缘顶部：1米；
}
th，td{
填充：0.25em；
}

水果
蔬菜
坚果
苹果
朝鲜蓟
杏仁
香蕉
西兰花
巴西坚果
樱桃
胡萝卜
腰果
希望这适合你。

如果您需要在


$（（）=>{//等待DOM就绪
$（'.btn'）。单击（函数onclick（）{//为类“btn”的所有按钮设置onclick处理程序
//点击
$（'.btn'）.removeClass（'active'）；
//从所有按钮中删除“活动”类
$（this.toggleClass（'active'）；
//但将“活动”类添加到单击的类（此）
$（'table'）.attr（'class'，$（this.attr（'id'））
//最后，将table类设置为单击按钮的id
})
})
a.active{color:green}
表.水果{显示：无}
表.蔬菜{显示：无}
表.螺母{显示：无}
table.fruits.fruits{display:table cell}
table.vegets.vegets{display:table cell}
table.nuts.nuts{display:table cell}

第一列
第二列
第三纵队
测试1
测试2
测试3
您好，谢谢您的回答！我可以在代码片段中看到代码正在工作，但是，当我尝试将脚本作为.js文件包含到html页面或按钮中时，按钮无法正常工作，我如何才能正确地包含它？@Djebzer将您的按钮包装在
.buttons
div中，正如代码中所示，这是为了增加一点特殊性和分组。我的糟糕！我将脚本添加到了中，而不是放在正文中，您的回答对我帮助很大，谢谢！很抱歉回到您这里，我想添加不同的ID而不是“column（number）”，但是代码看起来非常复杂。。我如何编辑JS代码，例如，如果列1、2和3现在都有一个不同的名称，没有数字，比如：（列1>水果，列2>蔬菜等等），我该怎么做？（最后一个问题）@Djebzer列的名称无关紧要，按钮索引应该与列索引匹配。我会更新这个问题，以包括一个完整的例子，你的水果/蔬菜，而不是1，2，3…嗨，欢迎来到SO。看起来您的问题已经得到了回答，但我想补充一点额外的语义HTML建议。如果没有外部链接或有意义的href属性，您应该只在锚定标记需要打开新URL时使用锚定标记。@JHeth不知道，谢谢！