Search through Table Cells

Question

I have a table which is hidden which contains 1272 rows and within it 3 columns with a

Store Name
Postcode
Button

The script is meant to search for all td cells for either a store name or a postcode and is not returning the desired results.

This is a link to the search

Advice appreciated

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

user_3825777 · Answer

I think this is what you are looking for. I've made this runnable snippet which hopefully makes things more clear for you and anyone else trying to think about this problem.

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



    Postal Code Store Name
    12345 store name
    99999 another store name
    54321 yet another name
    34343 4th name
    87898 fifth name

Search through Table Cells

1 Answers