Create a search bar to search value from table in HTML

Question

I am trying to create a search bar to search values from tables. Below is my html table code. But I don't know how to create a search bar in html to search values. Please see picture what I am trying to achieve. Thank you

<!DOCTYPE html>
<html>
<body>

<h1>Customer Data</h1>

<table border="1">
  <tr>
  <th>Customer ID</th>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Gender</th>
    <th>Phone</th>
    <th>Email</th>
    <th>Address</th>
    <th>Zip</th>
    <th>Date of Birth</th>

  </tr>

  <tr>
    <td>C1121</td>
    <td>James</td>
    <td>Bill</d>
    <td> Male </td>
    <td>123456789</td>
    <td>J@gmail.com</td>
    <td></td>
    <td> </td>
    <td>09/02/1999</td>
  </tr>

  <tr>
    <td>C54</td>
    <td>Sarah</td>
    <td>Sean</d>
    <td> Female </td>
    <td></td>
    <td></td>
    <td>abc street</td>
    <td>00000</td>
    <td>01/26/1992</td>
  </tr>

</table>

</body>
</html>

You mean like this? `` Or were you intending this to be a [tag:javascript] question? — Joseph Marikle, Nov 30 '17 at 21:39

score 1 · Answer 1 · answered Nov 30 '17 at 21:44

You will need to use JavaScript to add filtering functionality via your search input. Unfortunately, there is no way to do what you want via HTML alone.

Here is a great link that details how to created a Filter/Search for HTML elements with some straightforward JavaScript and no additional libraries. It seems to be exactly what you are looking for, though you will have to make some slight changes since you are wanting to filter table elements, and your rows are not associated with each other, which will make your solution more complex. But it's a good place to start.

Create a search bar to search value from table in HTML

1 Answers1