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

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() {&nbsp; $("#myInput").on("keyup", function() {&nbsp; &nbsp; var value = $(this).val().toLowerCase();&nbsp; &nbsp; $("#myTable tr").filter(function() {&nbsp; &nbsp; &nbsp; $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)&nbsp; &nbsp; });&nbsp; &nbsp; $("#noRecordTR").toggle(!$("#myTable tr:visible").length);&nbsp; });});.notfound {&nbsp; &nbsp;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">&nbsp; <thead class="table-light">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th scope="col">Image</th>&nbsp; &nbsp; &nbsp; <th scope="col">Product</th>&nbsp; &nbsp; &nbsp; <th scope="col">Price</th>&nbsp; &nbsp; &nbsp; <th scope="col">Quantity</th>&nbsp; &nbsp; &nbsp; <th scope="col">QR Code</th>&nbsp; &nbsp; &nbsp; <th colspan="2" scope="col"></th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody id="myTable">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th scope="row">1</th>&nbsp; &nbsp; &nbsp; <td>Mark</td>&nbsp; &nbsp; &nbsp; <td>Otto</td>&nbsp; &nbsp; &nbsp; <td>100</td>&nbsp; &nbsp; &nbsp; <td>QR</td>&nbsp; &nbsp; &nbsp; <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>&nbsp; &nbsp; &nbsp; <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th scope="row">2</th>&nbsp; &nbsp; &nbsp; <td>Jacob</td>&nbsp; &nbsp; &nbsp; <td>Thornton</td>&nbsp; &nbsp; &nbsp; <td>100</td>&nbsp; &nbsp; &nbsp; <td>QR</td>&nbsp; &nbsp; &nbsp; <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>&nbsp; &nbsp; &nbsp; <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th scope="row">3</th>&nbsp; &nbsp; &nbsp; <td colspan="2">Larry the Bird</td>&nbsp; &nbsp; &nbsp; <td>100</td>&nbsp; &nbsp; &nbsp; <td>QR</td>&nbsp; &nbsp; &nbsp; <td width="30px"><a href="#"><a class="btn btn-primary btn-sm" href="#" role="button">Details</a></td>&nbsp; &nbsp; &nbsp; <td width="30px"><a class="btn btn-danger btn-sm" href="#" role="button">Remove</a></td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr id="noRecordTR" class='notfound'>&nbsp; &nbsp; &nbsp; <td colspan='7'>No record found</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>