HTML Table Filter Generator v1.1

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 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() function accepts 2 additional parameters that will be explained in the next tables. In the example below, by specifing a row number as a "reference" row, we tell the function which 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

setFilterGrid("table2",1);

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 pass the mentioned parameter in order to calculate the right number of columns and also define from which row should start the filtering process. Note that merged cells (<td colspan="2">) are simply skipped.

By default, the script adds text boxes (<input>). As you will see in the next example, you can also decide to not display a filter or use drop-down lists (<select>) instead of text boxes:

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

To do that you just need to declare an Array in which you specify which filters should not be displayed or displayed as drop-down lists:

<script language="javascript" type="text/javascript">
	var table3Filters = {
		
  col_0: "none",

    col_1: "select"
	}

  setFilterGrid("table3",1,table3Filters);
</script>

You can name the Array as you want, but don't forget to add it to the parameters of the setFilterGrid() function. It is important to respect the syntax and naming convention as shown above. There are only 2 values: "none" hides the text box for the designated column and "select" creates a drop-down list with only 1 occurrence of each cell data. Similarly to row designation, here the first column is column number 0: col_0.

Last thing...

I 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:

/*====================================================
	- html elements
	- edit attributes below to change <table>, <td>, 
	<th> style etc.
=====================================================*/
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
	- edit classes below to change <input> and <a>
	style
=====================================================*/
a.btn{
	border:1px outset #ccc;
	margin:1px; padding:1px;
	text-decoration:none; color: #666;
	background-color:#CCCCCC;
}
.flt{ 
	background-color:#f4f4f4; border:1px inset #ccc; 
	margin:0; width:100%;
}
.flt_s{
	background-color:#f4f4f4; border:1px inset #ccc; 
	margin:0; width:90%;
}
</style>

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

function AddRow(id,n,f)
/*====================================================
	- adds a filter (input) for each column (td)
	- adds button on last column
=====================================================*/
{
	var t = document.getElementById(id);
	var fltrow = t.insertRow(0);
	var inpclass;

for(var i=0; i<n; i++)
	{
		var fltcell = fltrow.insertCell(i);
		i==n-1 ? inpclass = "flt_s" : inpclass = "flt";
		
		if(f==undefined || f["col_"+i]==undefined || f["col_"+i]=="none") 
		{
			var inp = document.createElement("input");		
			inp.setAttribute("id","flt"+i+"_"+id);
			if(f==undefined || f["col_"+i]==undefined) inp.setAttribute("type","text");
			else inp.setAttribute("type","hidden");
			//inp.setAttribute("class","flt"); //doesn't seem to work on ie<=6		
			fltcell.appendChild(inp);
			document.getElementById("flt"+i+"_"+id).className = inpclass;
			document.getElementById("flt"+i+"_"+id).onkeypress = DetectKey;			
		}
		else if(f["col_"+i]=="select")
		{
			var slc = document.createElement("select");
			slc.setAttribute("id","flt"+i+"_"+id);
			fltcell.appendChild(slc);
			PopulateOptions(id,i,n);
			document.getElementById("flt"+i+"_"+id).className = inpclass;
			document.getElementById("flt"+i+"_"+id).onkeypress = DetectKey;
		}
		
		if(i==n-1) // this adds button
		{
			var btn = document.createElement("a");
			
			btn.setAttribute("id","btn"+i+"_"+id);
			btn.setAttribute("href","javascript:Filter('"+id+"');");
			btn.setAttribute("class","go");
			fltcell.appendChild(btn);
			btn.appendChild(document.createTextNode("go"));
			
			document.getElementById("btn"+i+"_"+id).className = "btn";
		}//if		
		
	}// for i
}

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]).toLowerCase();
				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 or select) ids are stored in  
	SearchFlt array
=====================================================*/
{
	SearchFlt = new Array;
	var t = document.getElementById(id);
	var tr = t.getElementsByTagName("tr")[0];
	var enfants = tr.childNodes;
	
	for(var i=0; i<enfants.length; i++) SearchFlt.push(enfants[i].firstChild.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;
}

</script>

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

<h1>HTML Table Filter Generator v1.1</h1>
<p>- Demo page at:<br>
<a href="http://mguglielmi.free.fr/scripts/TableFilter/?l=en">mguglielmi.free.fr/scripts/TableFilter/?l=en</a>
</p>
<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 a few examples of 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>

<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 width="30%"><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>

<table id="table2" cellspacing="0" class="mytable" >
  <tr> 
    <td colspan="6"><strong>This is the table caption </strong></td>
  </tr>
  <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 width="30%"><strong>By Rail (hrs)</strong></td>
  </tr>
  <tr> 
    <td><strong>Sydney</strong></td>
    <td>Adelaide</td>
    <td>1412</td>
    <td>1.4</td>
    <td>24</td>
    <td>25.3</td>
  </tr>
  <tr> 
    <td><strong>Sydney</strong></td>
    <td>Brisbane</td>
    <td>982</td>
    <td>1.5</td>
    <td>17</td>
    <td>16</td>
  </tr>
  <tr> 
    <td><strong>Sydney</strong></td>
    <td>Canberra</td>
    <td>286</td>
    <td>.6</td>
    <td>4.2</td>
    <td>4.3</td>
  </tr>
  <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 colspan="2" bgcolor="#FFFFCC">Brisbane2045</td>
    <td>2.15</td>
    <td>33.3</td>
    <td>40</td>
  </tr>
</table>

<table id="table3" cellspacing="0" class="mytable" >
  <tr> 
    <td colspan="7"><strong>This is the table caption </strong></td>
  </tr>
  <tr>
    <td> </td>
    <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 width="30%"><strong>By Rail (hrs)</strong></td>
  </tr>
  <tr>
    <td>1.</td>
    <td><strong>Sydney</strong></td>
    <td>Adelaide</td>
    <td>1412</td>
    <td>1.4</td>
    <td>24</td>
    <td>25.3</td>
  </tr>
  <tr>
    <td>2.</td>
    <td><strong>Sydney</strong></td>
    <td>Brisbane</td>
    <td>982</td>
    <td>1.5</td>
    <td>17</td>
    <td>16</td>
  </tr>
  <tr>
    <td>3.</td>
    <td><strong>Sydney</strong></td>
    <td>Canberra</td>
    <td>286</td>
    <td>.6</td>
    <td>4.2</td>
    <td>4.3</td>
  </tr>
  <tr>
    <td>4.</td>
    <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>5.</td>
    <td><strong>Adelaide</strong></td>
    <td>Perth</td>
    <td>2781</td>
    <td>3.1</td>
    <td>35</td>
    <td>38</td>
  </tr>
  <tr>
    <td>6.</td>
    <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>7.</td>
    <td><strong>Adelaide</strong></td>
    <td colspan="2" bgcolor="#FFFFCC">Brisbane2045</td>
    <td>2.15</td>
    <td>33.3</td>
    <td>40</td>
  </tr>
</table>

<p>- Demo page at:<br>
<a href="http://mguglielmi.free.fr/scripts/TableFilter/?l=en">mguglielmi.free.fr/scripts/TableFilter/?l=en</a>
</p>