jquery 添加没有找到结果的行

Question

$(document).ready(function(){
  $("#ltt").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#ltt tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
if (this[0]){
    "nothing found"
}
    });

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input id="ltt" type="text" placeholder="Search..">
<br><br>
<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Birthday</th>
  </tr>
  </thead>
  <tbody id="ltt">
  <tr>
    <td>James</td>
    <td>Heier</td>
    <td>30 April 1983</td>
  </tr>
  <tr>
    <td>Sandro</td>
    <td>Key</td>
    <td>14 May 1986</td>
  </tr>
  </tbody>
</table>

我正在尝试添加一行以防找不到匹配项，你能支持我并告诉我我做错了什么吗？我把整个查询。请在下面找到脚本非常感谢您的帮助和支持

Answer 1

我会使用 .each() 而不是 .filter()，因为您不是在过滤数组，而只是对每个元素执行操作。还使用命名参数而不是我在评论中提到的 this。

最后，您可以简单地计算有多少元素最终可见，然后根据需要隐藏或显示 "nothing found" 消息。

另请注意，在您的原始代码中，"nothing found" 字符串永远不会显示，因为它只是您的 JavaScript 代码中的一个字符串，永远不会进入 DOM.

按照这些思路应该可行。您将希望根据我的粗略示例改进演示文稿，例如 table headers 仍然出现并在显示 "Nothing found" 时四处移动。但它应该会给您一些从这里开始的想法：

$(document).ready(function(){
  $("#ltt").on("keyup", function(event) {
    var value = $(event.target).val().toLowerCase();
    var count = 0;
    $("#ltt tr").each(function(index, element) {
      var show = $(element).text().toLowerCase().indexOf(value) > -1;
      $(element).toggle(show);
      if( show ) {
        count++;
      }
    });
    $('#nothing').toggle( count === 0 );
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<input id="ltt" type="text" placeholder="Search..">
<br><br>
<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Birthday</th>
  </tr>
  </thead>
  <tbody id="ltt">
  <tr>
    <td>James</td>
    <td>Heier</td>
    <td>30 April 1983</td>
  </tr>
  <tr>
    <td>Sandro</td>
    <td>Key</td>
    <td>14 May 1986</td>
  </tr>
  </tbody>
</table>
<div id="nothing" style="display: none;">
    Nothing found
</div>

jquery 添加没有找到结果的行

jquery add line with no results found

html

jquery

search-box