时间戳

首页 > 解决方案 > 在表格中实时搜索特定列

javascript - 在表格中实时搜索特定列

问题描述

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

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>

我的函数有一些错误，不能正常工作。

我怎样才能改变我的功能，当我开始输入时只过滤数字？我需要动态地创建函数，以便我可以传递应该用于搜索的列。

标签： javascriptjqueryhtml

解决方案

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

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)，它只会在第一列中查找。

推荐阅读