Question

我有一个要过滤的表，以获取与表中的数据匹配的数据。现在，我正在获取输入到搜索栏中的数据。我正在使用HTML和Javascript。

问题：我还希望出现“找不到匹配项”，并且在此过程中，它仅适用于第一行。例如。如果任何字母未出现在第一行，我只会得到“找不到匹配项”。但是我不希望找到与所有不符合搜索条件的行匹配的内容。

HTML（EDIT）

<input id="myInput" type="text" placeholder="Search.." style="margin-left:-240px">
<div class="noResults" style="display:none; margin-left:-240px">No Match Found</div>

<table class="newtable" style="table-layout:fixed">
<thead>
    <tr>
        <th><div style="width:350px">Document name</div></th>
        <th><div style="margin-left:10px; width:100px">Client</div></th>
        <th><div style="margin-left:10px; width:100px">Date uploaded</div></th>
        <th><div style="margin-left:10px">File</div></th>
    </tr>
</thead>
{% for file in docs %}
<tbody id="myTable">
    <tr>
        <td><div style="width:350px"><a href="/media/{{ file.Filename }}">{{ file.Document_name }}</a></div></td>
        <td><div style="margin-left:10px; width:100px">{{ file.Client }}</div></td>
        <td><div style="margin-left:10px; width:100px">{{ file.Date }}</div></td>
        <td><div style="margin-left:10px">{{ file.Filename }}</div></td>
    </tr>
 </tbody>
 {% endfor %}
</table>

JavaScript

<script>
  $(document).ready(function  ()  {
    (function  ($)  {
      $("#myInput").keyup(function  ()  {
        var  rex  =  new  RegExp($(this).val(),  "i");
        $("#myTable tr").hide();
        $("#myTable tr").filter(function  ()  {
          return  rex.test($(this).text());
        }).show();
        $(".noResults").hide();
        if ($("#myTable tr:visible").length == 0)  {
          $(".noResults").show();
        }
      })
    }(jQuery));
  });
</script>

对于不符合搜索条件的表数据，找不到匹配项

0 个答案: