Question

我想向消息显示“未找到记录”。如果搜索后表格中没有结果。这是jsfiddle https://jsfiddle.net/jclaude/yxs8v1a9/2/

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>

<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>  
<input id="myInput" type="text" placeholder="Search..">
<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>Mary</td>
    <td>Moe</td>
    <td>mary@mail.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@greatstuff.com</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>a_r@test.com</td>
  </tr>
  </tbody>
</table>

<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>

</body>
</html>

jQuery

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

CSS

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;
}

我试图在jquery中搜索此过滤器功能，但不幸的是我没有找到任何解决方案/类似于我的问题。我还查看了文档https://api.jquery.com/filter/

Answer 1

在下面尝试此代码

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr:not('.no-records')").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    var trSel =  $("#myTable tr:not('.no-records'):visible")
    // Check for number of rows & append no records found row
    if(trSel.length == 0){
        $("#myTable").html('<tr class="no-records"><td colspan="3">No record found.</td></tr>')
    }
    else{
        $('.no-records').remove()
    }

  });
});

我们在这里所做的是 检查是否有可见行 ，如果否，那么我们“ 添加自定义行 ，其中说没有其他记录，我们 删除该自定义行 。如果您有任何疑问，请告诉我。

检查可见行数：

var trSel =  $("#myTable tr:not('.no-records'):visible")
trSel.length

追加一行，表示没有记录：

$("#myTable").html('<tr class="no-records"><td colspan="3">No record found.</td></tr>')

删除没有记录的行

$('.no-records').remove()

如何显示消息“找不到记录”。如果使用jquery筛选器功能在表tbody中没有记录

1 个答案: