我有一个包含多个行和列以及一组搜索字段的表。我希望能够显示/隐藏与搜索字段匹配/不匹配的行。每个字段都与表的一列相关。我在这项任务中取得了部分成功，因为过滤正确完成(如您所见 here )。不过，我想解决两件事。
- 首先，jquery 脚本还隐藏了表头。
- 其次，我希望能够在键入时过滤行。前任。如果我在名称框中仅键入“J”，则所有内容都会消失，因为没有名称为“J”的行。然而，我们有“James”和“Jamie”，它们是潜在的匹配项。我想保留它们，直到名字完全输入为止。我尝试使用
s1.localeCompare(s2)(链接 here )来完成此操作，但它不起作用。
顺便说一句，无需担心大写/小写输入。实际上我在原始代码中处理了它，但在这里尝试保持简单。
这里的代码:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
table = $("#MI6"); //set table name
search_field = new Object();
///we create it as an object, initially empty
$('.search-key').on('change keyup paste', function () {
search_field['name'] = $( "#name" ).val();
search_field['lastname'] = $("#lastname").val();
search_field['number'] = $("#number").val();
table.find('tr').each(function () {
current_row = $(this); //keep track of the row being checked, iterate through it's cells
var display = 0;
current_row.show();
$(this).find('td').each(function() {
//when we stumble upon the data used as a search criteria
cell_value = $(this).html(); //gets the value of the cell being checked
if (cell_value == search_field[this.id] || search_field[this.id] == '') {
display++;
}
});
if (display < 3) {
current_row.hide(); //if this cell is a match, or we no longer want to use it as a search criteria, the row is displayed
}
});
});
});
</script>
</head>
<body>
<input type="text" id="name" class="search-key" placeholder="name">
<input type="text" id="lastname" class="search-key" placeholder="lastname">
<input type="number" id="number" class="search-key" placeholder="number">
<p></p>
<table id="MI6">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Number</th>
</tr>
<tr>
<td id="name">James</td>
<td id="lastname">Bond</td>
<td id="number">7</td>
</tr>
<tr>
<td id="name">Vesper</td>
<td id="lastname">Lynd</td>
<td id="number">6</td>
</tr>
<tr>
<td id="name">Rene</td>
<td id="lastname">Mathis</td>
<td id="number">5</td>
</tr>
</table>
</body>
</html>
最佳答案
要回答您的第一个问题，只需使用 .not(':first') 从集合中省略表格的第一行即可:
table.find('tr').not(':first')
为了进行部分字符串匹配，您可以使用indexOf() .
The indexOf() method returns the index within the calling String object of the first occurrence of the specified value, starting the search at fromIndex. Returns -1 if the value is not found.
我注意到您可以在标记中重复 id，它们必须是唯一的。
可以通过对标记进行一些小更改来重写您的脚本，使其更加动态:
<td data-input="name">Rene</td>
<td data-input="lastname">Mathis</td>
<td data-input="number">5</td>
然后，您可以使用data-input来定位相应的输入。您可以将其与 jQuery 的 filter() 方法结合起来以返回匹配的行:
/* $rows = table.find('tr').not(':first') */
$rows.hide().filter(function() {
return $(this).find('td').filter(function() {
var tdText = $(this).text().toLowerCase(),
inputValue = $('#' + $(this).data('input')).val().toLowerCase();
return tdText.indexOf(inputValue) != -1;
}).length == $(this).find('td').length;
}).show();
上面首先隐藏每一行，然后过滤。在其中，每个包含的 td 都会被过滤，将其文本与相应的输入值进行比较。如果找到匹配项，则返回td。然后，它根据该行中的 td 元素的数量检查匹配的 td 元素的数量，如果它们相同，则所有字段都包含部分匹配，并且整个行被返回。最后，所有匹配的行都会显示出来。
这种方式将允许您添加更多输入和 tds，而无需修改代码。您只需在输入上设置 id，并将相应的 data-input 添加到 td 元素即可。
Here's a complete example
关于jquery - 使用多个过滤器过滤表行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35080469/