Searching a Table with JavaScript


This is an example of how to search for values within an HTML table by using the HTML Table Search library. I forked the searching JavaScript code from here. A demo page is provided by the original author.


Be sure to download and include the JavaScript source file.


Say you have in your index.html file the following table:

<!-- search box -->
<input type="text" id="table-search-input">

<!-- table -->
<table id="mytable">

The tablesearch arguments are as follows:

new TableSearch(searchBoxId, dataTableId [, options]).init();

For the example, you could use the following code to activate the table search:

new TableSearch('table-search-input', 'mytable').init();

At the bottom of your html code be sure to include the JavaScript files:

<!-- table search -->
<script type="text/javascript" src="tablesearch.js"></script>

  new TableSearch('table-search-input', 'mytable').init();

© 2024 by Ryan Rickgauer