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。

最后，您可以简单地计算出最终有多少个元素可见，然后根据需要隐藏或显示“未找到内容”消息。

还要注意，在您的原始代码中，“什么都找不到”字符串将永远不会显示，因为它只是JavaScript代码中的字符串，而且永远不会进入DOM。

遵循这些思路应该可以。您可能希望通过我的粗略示例来改进演示，例如，当显示“未找到任何内容”时，表格标题仍会出现并四处移动。但这应该给您一些从这里出发的想法：

$(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添加行，未找到结果

1 个答案: