在表格中实时搜索特定列

Question

我目前正在尝试为表格中的特定列创建实时搜索。 我搜索了一下，但只能找到在所有列中搜索的解决方案。 这是我的代码：

 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> 

我的函数有一些错误，无法正常工作。

如何以这样的方式更改我的功能，即当我开始键入时，只过滤数字？ 我需要动态创建函数，以便可以传递应用于搜索的列。

Answer 1

导致其搜索所有列的这一行是这一行：

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) ，它将仅在第一列中显示。