Add jQuery to Your Website
In the above code snippet, we are using Google’s hosted jQuery library. It’ll provide great speed and reliability. The jQuery version we are using is 1.9.1. You can change this by changing the
1.9.1 of the jQuery library URL.
The table is easy to construct, so if you already have a table, it’s simple to modify that table’s HTML, to make the table searchable.
All you have to do is modify the
<tr> HTML tag, like so:
<tr class="data-content" data-table="">
data-table="" in the available code snippet. It will not be empty. Instead, you should place a concentration word(s) in it or the value of a column’s cell. What this means is that you should pick a column, that will be used to match the search term to that table’s row, which must likely will be the first table column.
Here is an example table with demo text:
<table> <thead> <tr> <th>Name</th> <th>Date</th> <th>Description</th> </tr> </thead> <tbody> <tr class="data-content" data-table="Toyota"> <td>Toyota</td> <td></td> <td></td> </tr> <tr class="data-content" data-table="Ford"> <td>Ford</td> <td></td> <td></td> </tr> </tbody> </table>
Search Form HTML
You will also need to make a search form in order for the end user to search the table. To do this, add the following HTML anywhere inside the body HTML tags:
<form role="form"> <input type="text" id="search" placeholder="Search the table..."> </form>
Placing the HTML above the table is probably the best place to put the code snippet but it’s really up to you, as it can be placed anywhere. You can also add CSS classes to the form elements or wrap the above code snippet in HTML to further add style. But make sure the input text field has an ID of search,
Here is the same code as above, but not minified, just in case you want to change anything: