javascript - 使用 Jquery 部分搜索 TABLE 中的单词

Question

我使用 Javascript 在 HTML 表格列中进行搜索。但是，我只能通过键入表格单元格内容的首字母来搜索值。

我的数据示例如下所示。

如果我在第 2 列中搜索值 123，所需的表格单元格就会按预期弹出。

例如，如果我搜索值 456 或 23，则不会发生任何情况。

|column1|column2|
__________________
|000|123 456|
|001|123 456|

我当前的 JavaScript:

<script type="text/javascript">
        $("#searchn").on("keyup", function() {
            var value = $(this).val();

            $("table tr").each(function(index) {
                if (index !== 0) {

                    $row = $(this);

                    var id = $row.find("td").children().eq(1).text();

                    if (id.indexOf(value) !== 0) {
                        $row.hide();
                    }
                    else {
                        $row.show();
                    }
                }
            });
        });
        </script>

Answer 1

您的逻辑有缺陷，因为如果找不到您要搜索的值，则 indexOf() 返回 -1，并且如果找不到则匹配的从零开始的索引它被找到了。因此，您的 if 语句存在缺陷，因为它排除了值开头的匹配项。

您应该将 if 条件更改为此:

if (id.indexOf(value) !== -1) {
    $row.hide();
}
else {
    $row.show();
}

另请注意，您可以通过使用 filter() 和 toggle() 来缩短此时间:

$("#searchn").on("keyup", function() {
  var value = $(this).val();

  $("table tr:not(:first)").show().filter(function(index) {
      return $(this).find("td:eq(1)").text().indexOf(value) == -1;
  }).hide();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
  </tr>
  <tr>
    <td>000</td>
    <td>123 456</td>
  </tr>
  <tr>
    <td>001</td>
    <td>123 456</td>
  </tr>
</table>

<input id="searchn" />