如果我搜索不在表中的记录，如何显示“未找到记录”？

Question

如果我搜索的内容不在表格中，我想显示“未找到记录”。有人可以向我展示一段 javascript 代码，告诉我如何实现这一目标吗？我没有使用任何插件，因为我对这些插件不熟悉。        <table class="table table-bordered table-hover">        <thead class="table-light">            <tr>            <th scope="col">Image</th>            <th scope="col">Product</th>            <th scope="col">Price</th>            <th scope="col">Quantity</th>            <th scope="col">QR Code</th>            <th colspan="2" scope="col"></th>            </tr>        </thead>        <tbody id="myTable">            <tr>            <th scope="row">1</th>            <td>Mark</td>            <td>Otto</td>            <td>100</td>            <td>QR</td>            <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>            <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>            </tr>            <tr>            <th scope="row">2</th>            <td>Jacob</td>            <td>Thornton</td>            <td>100</td>            <td>QR</td>            <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>            <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>            </tr>            <tr>            <th scope="row">3</th>            <td colspan="2">Larry the Bird</td>            <td>100</td>            <td>QR</td>            <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>            <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>            </tr>            <tr id="noRecordTR" class='notfound'>            <td colspan='7'>No record found</td>            </tr>        </tbody>        </table>这是我的 HTML 文件，表格所在的位置...    <script src="__assets/js/jquery-3.5.1.min.js"></script>    <script src="__assets/js/bootstrap.bundle.min.js"></script>    </script> 这是我的 javascript 文件。我知道我必须放一些js，但我不知道我要放什么。谢谢。

Answer 1

因此，请检查隐藏后是否有任何行可见

$(document).ready(function() {

  $("#myInput").on("keyup", function() {

    var value = $(this).val().toLowerCase();

    $("#myTable tr").filter(function() {

      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });

    $("#noRecordTR").toggle(!$("#myTable tr:visible").length);

  });

});

.notfound {

   display: none;

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="myInput" />

<table class="table table-bordered table-hover">

  <thead class="table-light">

    <tr>

      <th scope="col">Image</th>

      <th scope="col">Product</th>

      <th scope="col">Price</th>

      <th scope="col">Quantity</th>

      <th scope="col">QR Code</th>

      <th colspan="2" scope="col"></th>

    </tr>

  </thead>

  <tbody id="myTable">

    <tr>

      <th scope="row">1</th>

      <td>Mark</td>

      <td>Otto</td>

      <td>100</td>

      <td>QR</td>

      <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>

      <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>

    </tr>

    <tr>

      <th scope="row">2</th>

      <td>Jacob</td>

      <td>Thornton</td>

      <td>100</td>

      <td>QR</td>

      <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>

      <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>

    </tr>

    <tr>

      <th scope="row">3</th>

      <td colspan="2">Larry the Bird</td>

      <td>100</td>

      <td>QR</td>

      <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>

      <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>

    </tr>

    <tr id="noRecordTR" class='notfound'>

      <td colspan='7'>No record found</td>

    </tr>

  </tbody>

</table>