HTML Table Filter Generator

This JavaScript adds to any HTML table a grid enabling users to perform multi-criteria searches. This feature can be useful with tables containing large quantities of data.

Over 2000+ free Javascript

at JavaScriptBank.com Website

Sampled by JavaScriptBank.com

What Is It?

This script adds to any html table a grid enabling users to perform multi-criteria searches. This feature can be useful with tables containing large quantities of data.

How Does It Work?

You just need to define the id attribute of a table and insert a piece of javascript code in the head of the html document or in an external ".js" file.

Here you have an example of an html table:

From	Destination	Road Distance (km)	By Air (hrs)	By Car/Coach (hrs)	By Rail (hrs)
Sydney	Adelaide	1412	1.4	24	25.3
Sydney	Brisbane	982	1.5	17	16
Sydney	Canberra	286	.6	4.2	4.3
Sydney	Melbourne	872	1.1	14.3	10.5
Adelaide	Perth	2781	3.1	35	38
Adelaide	Alice Springs	1533	2	20	20.25
Adelaide	Brisbane	2045	2.15	33.3	40

Below is the same table with a filtering grid generated automatically:

From	Destination	Road Distance (km)	By Air (hrs)	By Car/Coach (hrs)	By Rail (hrs)
Sydney	Adelaide	1412	1.4	24	25.3
Sydney	Brisbane	982	1.5	17	16
Sydney	Canberra	286	.6	4.2	4.3
Sydney	Melbourne	872	1.1	14.3	10.5
Adelaide	Perth	2781	3.1	35	38
Adelaide	Alice Springs	1533	2	20	20.25
Adelaide	Brisbane	2045	2.15	33.3	40

By adding an id (id="table1") to the table and inserting the script below in the <body> section:

<script language="javascript" type="text/javascript">
   setFilterGrid("table1");
</script>

the grid will be generated automatically. The number of filters (<input>) is equal to the number of columns (<td>).

If your document contains several tables (like this page), it is important to define unique ids, otherwise the script will not work properly.

The setFilterGrid("table2",1) function accepts an additional parameter that tells the function which reference row to use in order to generate the right number of filters:

This is the table caption
From	Destination	Road Distance (km)	By Air (hrs)	By Car/Coach (hrs)	By Rail (hrs)
Sydney	Adelaide	1412	1.4	24	25.3
Sydney	Brisbane	982	1.5	17	16
Sydney	Canberra	286	.6	4.2	4.3
Sydney	Melbourne	872	1.1	14.3	10.5
Adelaide	Perth	2781	3.1	35	38
Adelaide	Alice Springs	1533	2	20	20.25
Adelaide	Brisbane2045		2.15	33.3	40

Here we have specified row number 1, that is the second row from the top. The 1st row is number 0. Since the 1st row doesn't contain the right number of columns, we need to use the second parameter of the function in order to calculate the right number of columns and also to define from which row should start the filtering process.

Finally, merged cells (<td colspan="2">) are simply skipped.

Last thing...

We hope you will find this script useful. Feel free to use and change this script, however I will be grateful if you could inform me about any usage or modification.

Enough words

Copy and paste this code in the <head></head> section of your html document:

body{ font-family:Arial, Helvetica, sans-serif; font-size:85%; }
table{ border:1px solid #ccc; font-size:85%;}
caption{ margin:10px 0 0 5px; padding:10px; text-align:left; }
th{ background-color:#003366; color:#FFFFFF; padding:2px; border:1px solid #ccc; }
td{ padding:2px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; }

/*====================================================
	- filter classes
=====================================================*/
a.btn{
	border:1px outset #ccc;
	margin:1px; padding:1px;
	text-decoration:none; color: #666;
	background-color:#CCCCCC;
}
a:hover.btn{ color:#990000; }

input.flt{ 
	background-color:#f4f4f4; border:1px inset #ccc; 
	margin:0; padding:0; width:100%;
	font-size:12px;
}
input.flt_s{
	background-color:#f4f4f4; border:1px inset #ccc; 
	margin:0; padding:0; width:80%;
	font-size:12px;
}
</style>

var TblId, StartRow, SearchFlt;
TblId = new Array, StartRow = new Array;

function setFilterGrid(id,ref_row)
/*====================================================
	- Checks if id exists and is a table
	- Calls fn that adds inputs and button
=====================================================*/
{
	var tbl = document.getElementById(id);
	if(tbl != null && tbl.nodeName.toLowerCase() == "table")
	{
		TblId.push(id);
		ref_row == undefined ? StartRow.push(2) : StartRow.push(ref_row+2);
		var ncells = getCellsNb(id,ref_row);
		AddRow(id,ncells);
	}
	//alert(TblId+" "+StartRow);
}

function Filter(id)
/*====================================================
	- gets search strings from SearchFlt array
	- retrieves data from each td in every single tr
	and compares to search string for current
	column
	- tr is hidden if all search strings are not 
	found
=====================================================*/
{	
	getFilters(id);
	var t = document.getElementById(id);
	var SearchArgs = new Array();
	var ncells = getCellsNb(id);
	
	for(i in SearchFlt) SearchArgs.push((document.getElementById(SearchFlt[i]).value).toLowerCase());
	
	var start_row = getStartRow(id);
	var row = t.getElementsByTagName("tr");
	
	for(var k=start_row; k<row.length; k++)
	{	
		/*** if table already filtered some rows are not visible ***/
		if(row[k].style.display == "none") row[k].style.display = "";
		
		var cell = getChildElms(row[k]).childNodes;
		var nchilds = cell.length;

if(nchilds == ncells){// checks if row has exact cell #
			var cell_value = new Array();
			var occurence = new Array();
			var isRowValid = true;
				
			for(var j=0; j<nchilds; j++)// this loop retrieves cell data
			{
				var cell_data = getCellText(cell[j]);
				cell_value.push(cell_data);
				
				if(SearchArgs[j]!="")
				{
					occurence[j] = cell_data.split(SearchArgs[j]).length;
				}
			}//for j
			
			for(var t=0; t<ncells; t++)
			{
				if(SearchArgs[t]!="" && occurence[t]<2) 
				{
					isRowValid = false;
				}
			}//for t
			
		}//if
		
		if(isRowValid==false) row[k].style.display = "none";
		else row[k].style.display = "";
		
	}// for k
}

function getCellsNb(id,nrow)
/*====================================================
	- returns number of cells in a row
	- if nrow param is passed returns number of cells 
	of that specific row
=====================================================*/
{
  	var t = document.getElementById(id);
	var tr;
	if(nrow == undefined) tr = t.getElementsByTagName("tr")[0];
	else  tr = t.getElementsByTagName("tr")[nrow];
	var n = getChildElms(tr);
	return n.childNodes.length;
}

function getFilters(id)
/*====================================================
	- filter (input) ids are stored in SearchFlt 
	array
=====================================================*/
{
	SearchFlt = new Array;
	var t = document.getElementById(id);
	var tr = t.getElementsByTagName("tr")[0];
	var inp = tr.getElementsByTagName("input");
	
	for(var i=0; i<inp.length; i++) SearchFlt.push(inp[i].getAttribute("id"));
}

function getStartRow(id)
/*====================================================
	- returns starting row for Filter fn for a 
	given table id
=====================================================*/
{
	var r;
	for(j in TblId)
	{
		if(TblId[j] == id) r = StartRow[j];
	}
	return r;
}

function getCellText(n)
/*====================================================
	- returns text + text of child nodes of a cell
=====================================================*/
{
	var s = "";
	var enfants = n.childNodes;
	for(var i=0; i<enfants.length; i++)
	{
		var child = enfants[i];
		if(child.nodeType == 3) s+= child.data;
		else s+= getCellText(child);
	}
	return s.toLowerCase();
}

</script>

and the following code in the <body></body>:

<h1>HTML Table Filter Generator</h1>
<p>Here you have an example of an html table: </p>

<table cellspacing="0" class="mytable" >
<tr>
<td><strong>From</strong></td>
<td><strong>Destination</strong></td>

<td><strong>Road Distance (km)</strong></td>
<td><strong>By Air (hrs)</strong></td>
<td width="10%"><strong>By Car/Coach (hrs)</strong></td>
<td><strong>By Rail (hrs)</strong></td>
</tr>

<tr>
<td><strong>Sydney</strong></td>
<td>Adelaide</td>
<td>1412</td>

<tr>
<td><strong>Sydney</strong></td>
<td>Brisbane</td>
<td>982</td>
<td>1.5</td>

<tr>
<td><strong>Sydney</strong></td>
<td>Canberra</td>
<td>286</td>
<td>.6</td>
<td>4.2</td>

<tr>
<td><strong>Sydney</strong></td>
<td>Melbourne</td>
<td>872</td>
<td>1.1</td>
<td>14.3</td>
<td>10.5</td>
</tr>

<tr>
<td><strong>Adelaide</strong></td>
<td>Perth</td>
<td>2781</td>
<td>3.1</td>
<td>35</td>
<td>38</td>
</tr>

<tr>
<td><strong>Adelaide</strong></td>
<td>Alice Springs</td>
<td>1533</td>
<td>2</td>
<td>20</td>
<td>20.25</td>
</tr>

<tr>
<td><strong>Adelaide</strong></td>

<td>Brisbane</td>
<td>2045</td>
<td>2.15</td>
<td>33.3</td>
<td>40</td>
</tr>
</table>

<p>Below the same table with a filtering grid generated automatically: </p>

<table id="table1" cellspacing="0" class="mytable" >
<tr>
<td><strong>From</strong></td>
<td><strong>Destination</strong></td>