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()来缩短此项：

＆＃13;

$("#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();
});

＆＃13;

<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" />

＆＃13;

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

1 个答案: