[英]Live search in table for specific column
我目前正在嘗試為表格中的特定列創建實時搜索。 我搜索了一下,但只能找到在所有列中搜索的解決方案。 這是我的代碼:
function searchInTable(table) { var value = this.value.toLowerCase().trim(); jQuery(table).each(function (index) { if (!index) return; jQuery(this).find("td").each(function () { var id = $(this).text().toLowerCase().trim(); var not_found = (id.indexOf(value) == -1); $(this).closest('tr').toggle(!not_found); return not_found; }); }); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input id="search-table-input" class="search-table-input" type="text" onkeyup="searchInTable('.table tr')" placeholder="Search Number..."> <table class="table"> <thead> <tr> <th class="table-number"> <span class="nobr">Number</span> </th> <th class="table-date"> <span class="nobr">Date</span> </th> </tr> </thead> <tbody> <tr> <td> <a>264</a> </td> <td> <span>2019-01-02</span> </td> </tr> <tr> <td> <a>967</a> </td> <td> <span>2019-01-02</span> </td> </tr> <tr> <td> <a>385</a> </td> <td> <span>2019-01-02</span> </td> </tr> <tr> <td> <a>642</a> </td> <td> <span>2019-01-02</span> </td> </tr> </tbody> </table>
我的函數有一些錯誤,無法正常工作。
如何以這樣的方式更改我的功能,即當我開始鍵入時,只過濾數字? 我需要動態創建函數,以便可以傳遞應用於搜索的列。
導致其搜索所有列的這一行是這一行:
jQuery(this).find("td").each(function () {
...將獲取當前行中的每個單元格,並查看其是否包含value
。 如果只想檢查特定列,則應以columnIndex
類的形式傳遞列索引,然后可以通過使用jQuery(this).find("td").eq(columnIndex)
來選擇正確的列jQuery的.eq()
函數選擇正確的一個。 代碼應如下所示:
function searchInTableColumn(table, columnIndex) {
//check this.value exists to avoid errors
var value = this.value ? this.value.toLowerCase().trim() : "";
jQuery(table).each(function (index) {
if (!index) return;
var tableCell = jQuery(this).find("td").eq(columnIndex);
var id = tableCell.text().toLowerCase().trim();
var not_found = (id.indexOf(value) == -1);
$(this).closest('tr').toggle(!not_found);
});
}
然后,您可以調用searchInTableColumn(table, 0)
,它將僅在第一列中顯示。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.