如何为表的每一列创建一个jquery多重过滤系统



我必须在jquery中创建一个多过滤器系统,但我必须验证我将在文本框中输入的文本是否与表中的元素相等。例如,若我输入一个名字John,我需要表中所有学生名字为John的行。如果我要写Joh,我只需要有学生名字Joh的行。我需要应用多个过滤器。

我尝试了

$(document).ready(function() {
$("#filter").click(function() {
var value = $("#myInput").val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}

td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<input id="myInput" type="text" placeholder="Search..">
<button id="filter" type="button" name="filter">Sumbit</button>
<br><br>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Kim</td>
<td>Moe</td>
<td>kim@example.com</td>
</tr>
<tr>
<td>Tim</td>
<td>Dooley</td>
<td>tim@example.com</td>
</tr>
<tr>
<td>Tanja</td>
<td>Ravendale</td>
<td>tanja@example.com</td>
</tr>
</tbody>
</table>
</body>
</html>

好的,试试这个。

$(document).ready(function() {
$("#filter").click(function() {
var value = $("#myInput").val();
$("#myTable tr").hide().filter(function() {
let rgx = new RegExp("\b"+value+"\b", "i");
let result = $(this).text().match(rgx);
return result != null;
}).show();
});
});

最新更新