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

时间:2016-08-02 11:44:36

标签: javascript jquery html-table

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

1 个答案:

答案 0 :(得分:0)

如果找不到您正在搜索的值,则indexOf()会返回-1,如果找到匹配的从零开始的索引,则您的逻辑存在缺陷。因此,您的if语句存在缺陷,因为它会在值的开头排除匹配。

您应该将if条件更改为:

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

另请注意,您可以使用filter()toggle()来缩短此项:

&#13;
&#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;
&#13;
&#13;