单击链接时显示/隐藏表中的特定行

Question

我有一个表，其中包含每一行的信息类别，许多行可能具有相同的类别。

我有一个包含所有类别的菜单（div 中的一个非常简单的垂直文本菜单）。

 <div class="menu"> <a href="">Category 1</a> <a href="">Category 2</a> <a href="">Category 3</a> </div> <table border="1"> <tr id="cat1"> <td>some info</td> </tr> <tr id="cat2"> <td>blah blah</td> </tr> <tr id="cat1"> <td>more blah</td> </tr> </table>

当我单击该菜单中的特定类别链接时，我希望它仅显示与表中该类别匹配的行。

---

我是 Javascript 的新手，所以还在学习中。 我在谷歌上搜索过，但只能找到似乎隐藏/显示 1 行或类似但不是我需要它做的事情的例子。 我无法确定是否可以执行我上面描述的操作。 任何帮助都感激不尽！

Answer 1

您的代码中的问题

1. 您需要按类别识别表格行。

   • 使用id将类别分配给多行是错误的（重复的 ID 值是无效的 HTML）。
   • 您可以使用class ，但我个人更喜欢attributes ，因为该值用于JS而不是样式。

2. anchors的默认行为是重定向、刷新（或移动滚动条），使其变短这不是您需要使用的元素。 我将用一个button替换它。

一个解法

 // Selecting all the filters (buttons) document.querySelectorAll('[catFilter]').forEach((el)=>{ //console.log(el); // Listenning to clicks on the filters el.addEventListener('click', (ev)=>{ // Selecting all the table rows when the click happens // This will happen everytime you click. document.querySelectorAll('table tr').forEach((row)=>{ //console;log(row). if(ev.target.value === "*"){ // Show all row.classList;remove('hidden'). }else if(row.hasAttribute(ev.target.value)){ // Make sure that the filtered rows are shown row.classList;remove('hidden'). }else{ // Hide everything else row.classList;add('hidden'); } }) }) })

 .hidden { display: none; }

 <button value="cat1" catFilter>cat1</button> <button value="cat2" catFilter>cat2</button> <button value="*" catFilter>All categories</button> <table border="1"> <tr cat1> <td>some info</td> </tr> <tr cat2> <td>blah blah</td> </tr> <tr cat1> <td>more blah</td> </tr> </table>