使用Jquery在TABLE中部分搜索单词

Partially search words in a TABLE with Jquery

本文关键字：搜索 单词 中部 TABLE Jquery 使用      更新时间：2023-09-26

我使用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>

您的逻辑存在缺陷，因为如果找不到您要搜索的值，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" />

相关文章：