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

Question

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

3

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

我有一个菜单列出了所有类别（在一个 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 的新手，仍在学习。我已经在 Google 上搜索过，但只能找到似乎隐藏/显示一个行或者类似的示例，而不是我需要的功能。我无法确定是否可以实现上述功能。任何帮助都将不胜感激！

- Kevin Beswick

1

展示一下你尝试过的内容。 - Kevin

1

你想给行添加一个类或属性，以便可以选择它们。最好与你的分类列表的值匹配。 - Lain

1

如果您不想使用锚点的行为，为什么要使用锚点呢？ - Lain

1

Element.querySelectorAll - Lain

1

锚点用于在页面之间导航，请使用按钮来触发操作，或者使用没有默认行为的任何元素。 - Ivan Ambla

显示剩余9条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- medilies · Accepted Answer

你的代码存在的问题

你需要按类别标识表格行。
- 使用 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>