我想显示给消息“找不到记录”。 如果搜索后在表中没有结果。 以下是示例https://makitweb.com/how-to-live-search-on-the-html-table-with-jquery/
Jquery代码
$("#searchrec").keyup(function () {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("searchrec");
filter = input.value.toUpperCase();
table = document.getElementById("detailTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
$("#detailTable tr:not('.no-records')").filter(function () {
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td)
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
}
else {
tr[i].style.display = "none";
}
}
var trSel = $("#detailTable tr:not('.no-records'):visible");
// Check for number of rows & append no records found row
if (trSel.length == 0) {
$("#detailTable").html('<tr class="no-records"><td colspan="3">No record found.</td></tr>');
}
else {
$('.no-records').remove();
}
});
//for (i = 0; i < tr.length; i++) {
// td = tr[i].getElementsByTagName("td")[0];
// if (td)
// txtValue = td.textContent || td.innerText;
// if (txtValue.toUpperCase().indexOf(filter) > -1) {
// tr[i].style.display = "";
// }
// else {
// tr[i].style.display = "none";
// }
//}
});
尽量避免将No records found行追加到表中，相反，您可以只显示和隐藏该行。
我已经更新了您的代码，并且还在标题行中添加了一个table-header类。
尝试按名称搜索以查看结果。
null
<!doctype html>
<html>
<head>
<title>Live Search</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<style>
.notfound {
display: none;
}
</style>
</head>
<body>
<input type='text' id='searchrec' placeholder='Enter search text'>
<!-- <input type='text' id='txt_name' placeholder='Enter search name'> -->
<br />
<table width='100%' border='1' id="detailTable" style='border-collapse:collapse;'>
<thead>
<tr class='table-heading'>
<th>S.no</th>
<th>Name</th>
<th>Course</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Yogesh singh</td>
<td>M.SC</td>
<td>Bhopal</td>
</tr>
<tr>
<td>2</td>
<td>Sonarika Bhadoria</td>
<td>BE</td>
<td>Pune</td>
</tr>
<tr>
<td>3</td>
<td>Vishal Sahu</td>
<td>BE</td>
<td>Indore</td>
</tr>
<tr>
<td>4</td>
<td>Sunil Patel</td>
<td>MBA</td>
<td>Bhopal</td>
</tr>
<tr>
<td>5</td>
<td>Anil Singh</td>
<td>MCA</td>
<td>Delhi</td>
</tr>
<tr class='no-records' style="display: none;">
<td colspan='4'>No record found</td>
</tr>
</tbody>
</table>
<!-- Script -->
<script type='text/javascript'>
$(document).ready(function () {
$("#searchrec").keyup(function () {
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("searchrec");
filter = input.value.toUpperCase();
table = document.getElementById("detailTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
$("#detailTable tr:not('.no-records')").filter(function () {
for (i = 0; i < tr.length; i++) {
td = $(tr[i]).find('td')[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
}
else {
tr[i].style.display = "none";
}
}
}
var trSel = $("#detailTable tr:not('.no-records, .table-heading'):visible");
// Check for number of rows & append no records found row
if (trSel.length == 0) {
$("#detailTable").find('.no-records').show();
}
else {
$("#detailTable").find('.no-records').hide();
}
});
});
});
</script>
</body>
</html>