javascript - 使用 Jquery 过滤表格数据

Question

我需要一点帮助来引导我走向正确的方向。这就是我正在努力实现的目标。

我有一个数据表，例如

<table><thead>
<tr><th>Categories</th><th>Week 1</th><th>Week 2</th><th>Week 3</th></tr>
</thead>
<tbody>
<tr><td>Category 1</td>
    <td>Sam: 5 <br /> Roger 10</td>
    <td>Sam: 0 <br /> Roger 5</td>
    <td>Susan: 25 <br /> Aimee 15</td>
</tr>
<tr><td>Category 2</td>
    <td>Sam: 5 <br /> John: 15</td>
    <td>Sam: 0 <br /> Roger: 15</td>
    <td>Susan: 25 <br /> Aimee: 15</td>
</tr>
</tbody></table>

这些是在上表中分配了编号的用户。

<ul>
<li><a href="#">John</a></li>
<li><a href="#">Roger</a></li>
<li><a href="#">Aimee</a></li>
<li><a href="#">Sam</a></li>
<li><a href="#">Susan</a></li>
</ul>

我希望使用 JQuery 创建一个过滤器，这样如果我只想在上表中看到 John，我可以单击上面列表中的该名称。我可以完全控制标记，因此我可以使用所需的类(用于选择)将用户名包装在表中，或添加任何其他代码等。

我该如何实现这一目标？我使用 Jquery 的经验有限，因此我们将不胜感激。谢谢

Answer 1

修改后的 HTML:

<ul class="names">
<li><a href="#">John</a></li>
<li><a href="#">Roger</a></li>
<li><a href="#">Aimee</a></li>
<li><a href="#">Sam</a></li>
<li><a href="#">Susan</a></li>
</ul>

<table><thead>
<tr><th>Categories</th><th>Week 1</th><th>Week 2</th><th>Week 3</th></tr>
</thead>
<tbody>
<tr><td>Category 1</td>
    <td><span data-name="Sam">Sam: 5</span> <br /> <span data-name="Roger">Roger 10</span></td>
    <td><span data-name="Sam">Sam: 0</span> <br /> <span data-name="Roger">Roger 5</span></td>
    <td><span data-name="Susan">Susan: 25</span> <br /> <span data-name="Aimee">Aimee 15</span></td>
</tr>
<tr><td>Category 2</td>
    <td><span data-name="Sam">Sam: 5</span> <br /> <span data-name="John">John: 15</span></td>
    <td><span data-name="Sam">Sam: 0</span> <br /> <span data-name="Roger">Roger: 15</span></td>
    <td><span data-name="Susan">Susan: 25</span> <br /> <span data-name="Aimee">Aimee: 15</span></td>
</tr>
</tbody></table>

js代码:

$(".names a").click(function(){
  $("table span[data-name]").hide();
  $("table span[data-name='"+$(this).text()+"']").show();
});

工作 fiddle :https://jsfiddle.net/1bh7ue49/1/