亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如果我搜索不在表中的記錄,如何顯示“未找到記錄”?

如果我搜索不在表中的記錄,如何顯示“未找到記錄”?

心有法竹 2023-12-14 14:10:27
如果我搜索的內容不在表格中,我想顯示“未找到記錄”。有人可以向我展示一段 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,但我不知道我要放什么。謝謝。
查看完整描述

1 回答

?
慕容森

TA貢獻1853條經驗 獲得超18個贊

因此,請檢查隱藏后是否有任何行可見


$(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>


查看完整回答
反對 回復 2023-12-14
  • 1 回答
  • 0 關注
  • 134 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號