0

I have a table of information with many names. First column is first name, second column is last name, 3rd is number. I want to show all the rows based on user input, but only want the search filter to go through specific columns with id's.

The jquery code: I have:

(document.ready(function()


$("#searchHere").keyup(function () {
  var $row = $("table tr");
  var $col = $("td").each().index();
  var input = this.value.toLowerCase();

  $row.show().filter(function() {
    $(this).find("td").eq(col).text().toLowerCase();
    return $(this).text(input);
  }).hide();
});

The HTML code

<input id="searchHere" placeholder="Search Me">

<table>
<tr>
  <td id='firstName'>John</td>
  <td id='lastName'>Doe</td>
  <td>One Two Three</td>
</tr>

<tr>
  <td id='firstName'>John</td>
  <td id='lastName'>Smith</td>
  <td>Two Three</td>
</tr>
</table>

I've been referring to this post, but I can't figure out the last piece of the puzzle.

How to perform a real time search and filter on a HTML table

Community
  • 1
  • 1
bryan151
  • 37
  • 1
  • 1
  • 9

1 Answers1

0

You could have one global search box that looks in each cell as opposed to separate inputs.

Dave Clarke
  • 2,677
  • 4
  • 22
  • 35