单击 link 时 table 中的 Show/Hide 特定行

Question

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

我有一个所有类别的菜单（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>

当我单击该菜单中的特定类别 link时，我希望它仅显示与该类别匹配的行 在 table.

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

Answer 1

你的代码有问题

您需要按类别识别 table 行。
- 使用 id 将类别分配给多行是错误的（重复的 ID 值是无效的 HTML）。
- 您可以使用 class，但我个人更喜欢 attributes，因为该值用于 JS 而不是样式。
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>

单击 link 时 table 中的 Show/Hide 特定行

Show/Hide specific rows in table when link is clicked

html

javascript

show-hide

你的代码有问题

一个解决方案