在web開發中,表格是一個非常常見的組件。而在表格中添加檢索功能有助于用戶更快地找到所需的數據。在這里,我們將介紹如何通過jquery實現表格的檢索功能。
首先,需要在html中引入jquery和一個用于檢索的input元素:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <input id="search-input" type="text" placeholder="搜索">
接下來,在jquery中監聽input元素的輸入事件,并根據輸入的內容來篩選表格中的數據:
<script> $(function(){ // 獲取表格對象 var table = $("table"); // 獲取表格中的數據tr元素 var trs = table.find("tr"); // 監聽輸入事件 $("#search-input").on("input", function(){ // 獲取輸入框的值 var keyword = $(this).val(); // 遍歷表格數據 trs.each(function(){ // 獲取當前行數據 var tr = $(this); var text = tr.text().toLowerCase(); // 根據輸入內容篩選 if(text.indexOf(keyword.toLowerCase()) != -1){ tr.show(); } else { tr.hide(); } }); }); }); </script>
通過以上代碼,我們實現了一個簡單的表格檢索功能。當用戶輸入內容時,表格會自動根據輸入的內容篩選對應的數據行并展示。
上一篇jquery表格自定義