我是 C++ 程序员，刚接触 JS。我正在尝试根据点击事件过滤表格。我有下表。我如何根据点击键和过滤其他记录来保留记录。
<!DOCTYPE html>
<html>
<body>
<table border =1 cellspacing="1" cellpadding="1" style="width:100%">
<tr><th>ID</th><th>Name</th><th>Marks</th></tr>
<tr>
<td>22</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>23</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>45</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>24</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>25</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>29</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<input type="checkbox" name="vehicle" value="22"> 22<br>
<input type="checkbox" name="vehicle" value="23"> 23 <br>
<input type="checkbox" name="vehicle" value="24"> 24<br>
<input type="checkbox" name="vehicle" value="25"> 25 <br>
<input type="checkbox" name="vehicle" value="29"> 29<br>
<input type="checkbox" name="vehicle" value="45"> 45 <br>
</body>
</html>
在上面的示例中，如果我单击 23，则应仅显示 ID 为 23 的记录，其余的应被过滤掉。
最佳答案
如果您正在寻找基于 jQuery 的解决方案，我已经准备好了一个。代码的逻辑非常简单:每当在任何复选框上检测到 change 事件时，我们都会触发过滤功能，但要注意:
- 如果没有复选框被选中，我们会显示所有表格行，但是
- 如果选中一个或多个，我们将继续进行过滤
对于过滤函数:
- 我们首先隐藏所有表格行。
- 然后，我们将选中复选框的所有值映射到一个数组中，比如
vals。这是通过使用.map()完成的，返回每个元素的值。我们链式.get()after.map()in order to retrieve the array . - 使用
.filter()函数比较每个表格行的第一个表格单元格中的文本节点，以查看文本节点是否与数组中的任何一个元素匹配。如果是，我们会退回并展示给他们看。
$(function() {
$('input[type="checkbox"]').change(function() {
// We check if one or more checkboxes are selected
// If one or more is selected, we perform filtering
if($('input[type="checkbox"]:checked').length > 0) {
// Get values all checked boxes
var vals = $('input[type="checkbox"]:checked').map(function() {
return this.value;
}).get();
// Here we do two things to table rows
// 1. We hide all
// 2. Then we filter, show those whose value in first <td> matches checkbox value
$('table tr')
.hide() // 1
.filter(function() { // 2
return vals.indexOf($(this).find('td:first').text()) > -1;
}).show();
} else {
// Show all
$('table tr').show();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border =1 cellspacing="1" cellpadding="1" style="width:100%">
<tr><th>ID</th><th>Name</th><th>Marks</th></tr>
<tr>
<td>22</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>23</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>45</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>24</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>25</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>29</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<input type="checkbox" name="vehicle" value="22"> 22<br>
<input type="checkbox" name="vehicle" value="23"> 23 <br>
<input type="checkbox" name="vehicle" value="24"> 24<br>
<input type="checkbox" name="vehicle" value="25"> 25 <br>
<input type="checkbox" name="vehicle" value="29"> 29<br>
<input type="checkbox" name="vehicle" value="45"> 45 <br>关于javascript - 如何根据按键点击过滤记录？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28063963/