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();
});

工作小提琴：https://jsfiddle.net/1bh7ue49/1/

Answer 2

在您的HTML中，只需将您的播放器名称包装在一个范围内，然后继续操作。

JS：

function begin(){
  $('a').on('click', function(){
    let $span = $('span');
    $span.show();
    const player = $(this).text().trim();
    $span.each((i, s) => {
      if($(s).text().indexOf(player) === -1){
        $(s).hide();
      }
    });
  });

}

$(document).ready(begin);

HTML：

<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>Sam: 5</span>
        <br />
        <span>Roger 10</span>
      </td>
      <td>
        <span>Sam: 0</span>
        <br />
        <span>Roger 5</span>
      </td>
      <td>
        <span>Susan: 25</span>
        <br />
        <span>Aimee 15</span>
      </td>
    </tr>
    <tr>
      <td>Category 2</td>
      <td>
        <span>Sam: 5</span>
        <br />
        <span>John: 15</span>
      </td>
      <td>
        <span>Sam: 0</span>
        <br />
        <span>Roger: 15</span>
      </td>
      <td>
        <span>Susan: 25</span>
        <br />
        <span>Aimee: 15</span>
      </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>

DEMO

使用Jquery过滤表格数据

2 个答案: