我需要一点帮助才能使我朝正确的方向朝着正确的方向发展。这就是我要实现的目标。
我有一个数据表,例如
<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创建一个过滤器,以便我只想在上表中看到约翰,我会在上面的列表中单击该名称。我可以完全控制标记,因此我可以在表格中包装用户名(用于选择(或添加任何其他代码等。
我该如何实现?我使用jQuery的经验有限,因此对任何帮助都将不胜感激。谢谢
修改后的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/
在您的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