时间戳

首页 > 解决方案 > 搜索表格单元格

javascript - 搜索表格单元格

问题描述

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

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

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

这是搜索链接

建议赞赏

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

标签： javascriptjqueryperformanceloops

解决方案

我想这就是你要找的。我制作了这个可运行的片段，希望能让你和其他任何试图思考这个问题的人更清楚。

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

推荐阅读