搜索表格单元格

Question

我有一个隐藏的表，其中包含 1272 行，其中 3 列带有一个

1. 商店名称
2. 邮政编码
3. 按钮

该脚本旨在搜索所有 td 单元格中的商店名称或邮政编码，但未返回所需的结果。

这是search的链接

建议

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


    $("table#participating_stores tr:gt(0)").each(function(index) {
        if (index !== 0) {
            $row = $(this);
            
            var $tdElement = $row.find("td");
            var id = $.trim($tdElement.text().toLowerCase()) 

            var matchedIndex = id.indexOf(value);
            
            if (matchedIndex != 0) {
                $row.hide();
            }
            else {
                //highlight matching text, passing element and matched text
      
                $row.show();
            }
        }
    });
});

Answer 1

我认为这就是您要寻找的。我已经制作了这个可运行的 sn-p，希望它能让你和任何试图思考这个问题的人更清楚。

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

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

table, tr, td, th{
    border: 1px solid black;
    padding: 3px;
}

table th{
    background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr><th>Postal Code</th><th>Store Name</th></tr>
    <tr><td>12345</td><td>store name</td></tr>
    <tr><td>99999</td><td>another store name</td></tr>
    <tr><td>54321</td><td>yet another name</td></tr>
    <tr><td>34343</td><td>4th name</td></tr>
    <tr><td>87898</td><td>fifth name</td></tr>
</table>
<br />
<input type="text" id="searchterm" placeholder="search"></input>