HTML Table Filter Generator v1.3

Description

This script adds to any html table a "filter by column" feature that enables users to filter and limit the data displayed within a long table. It even works on tables with uneven rows. The script automatically adds a filter grid bar at the top of the desired table. Users can use the following operators to filter columns containing numeric data: <, <=, >, >=.

- Demo page at:
mguglielmi.free.fr/scripts/TableFilter/?l=en

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 a regular 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	Brisbane	2045	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_2: "select",
		btn_text: "  >  "
	}
	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 for col_n: "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.

The button "go" in the grid can also be changed. By adding to the Array the btn_text property with a desired value, you can modify the text of the button. The grid button can also be hidden by setting the btn property to false:

<script language="javascript" type="text/javascript">
	var table3Filters = {
		col_0: "none",
		col_2: "select",
		btn: false
	}
	setFilterGrid("table3",1,table3Filters);
</script>

Properties table

In the following table you will find all the elements you can define in the grid:

Property Name	Value	Type	Description	Example
col_0	"none"	string	hides text box (input) for a desired column	`var MyTableFilter = { col_0: "none" }`
col_3	"select"	string	generates a drop-down list for a desired column	`var MyTableFilter = { col_3: "select" }`
btn	false	boolean	hides "Go" button in the grid	`var MyTableFilter = { btn: false }`
btn_text	"my button"	string	changes the text of the button	`var MyTableFilter = { btn_text: "Filter" }`
enter_key	false	boolean	disables "enter" key	`var MyTableFilter = { enter_key: false }`
mod_filter_fn	function(){ myFunction(); }	function	calls another function instead of the default function ( Filter('mytable') ) at submission	`var MyTableFilter = { mod_filter_fn: function(){ alert('Calls another function!!!'); Filter('table_3'); }}`

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{ 
	margin:15px; padding:15px; border:1px solid #666;
	font-family:Arial, Helvetica, sans-serif; font-size:88%; 
}
h2{ margin-top: 50px; }
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; }
pre{ margin:5px; padding:5px; background-color:#f4f4f4; border:1px solid #ccc; }
.mytable{ width: 100%; }

/*====================================================
	- filter classes
	- edit classes below to change <input> style
=====================================================*/
.btnflt{
	font-size:11px;
	margin:0 2px 0 2px; padding:0 1px 0 1px;
	text-decoration:none; color: #fff;
	background-color:#666;
}
.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, ModFn, ModFnId;
TblId = new Array(), StartRow = new Array();
ModFn = new Array(), ModFnId = new Array();

function AddRow(id,n,f)
/*====================================================
	- adds a row containing the filtering grid
=====================================================*/
{
	var t = document.getElementById(id);
	var fltrow = t.insertRow(0);
	var inpclass, displayBtn, btntext, enterkey, modfilter_fn;
	
	f!=undefined && f["btn"]==false ? displayBtn = false : displayBtn = true;
	f!=undefined && f["btn_text"]!=undefined ? btntext = f["btn_text"] : btntext = "go";
	f!=undefined && f["enter_key"]==false ? enterkey = false : enterkey = true;
	f!=undefined && f["mod_filter_fn"] ? modfilter_fn = true : modfilter_fn = false;
	if(modfilter_fn)
	{
		ModFnId.push(id);
		ModFn.push(f["mod_filter_fn"]);
	}

for(var i=0; i<n; i++)
	{
		var fltcell = fltrow.insertCell(i);
		i==n-1 && displayBtn==true ? 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
			inp.className = inpclass;			
			fltcell.appendChild(inp);
			if(enterkey) inp.onkeypress = DetectKey;
		}
		else if(f["col_"+i]=="select")
		{
			var slc = document.createElement("select");
			slc.setAttribute("id","flt"+i+"_"+id);
			slc.className = inpclass;
			fltcell.appendChild(slc);
			PopulateOptions(id,i,n);			
			if(enterkey) slc.onkeypress = DetectKey;
		}
		
		if(i==n-1 && displayBtn==true) // this adds button
		{
			var btn = document.createElement("input");
			
			btn.setAttribute("id","btn"+i+"_"+id);
			btn.setAttribute("type","button");
			btn.setAttribute("value",btntext);
			btn.className = "btnflt";
			
			fltcell.appendChild(btn);
			(!modfilter_fn) ? btn.onclick = function(){Filter(id)} : btn.onclick = f["mod_filter_fn"];					
		}//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]!="")
				{
					var num_cell_data = parseFloat(cell_data);
					if(/<=/.test(SearchArgs[j]) && !isNaN(num_cell_data)) // first checks if there is an operator (<,>,<=,>=)
					{
						num_cell_data <= parseFloat(SearchArgs[j].replace(/<=/,"")) ? occurence[j] = 3 : occurence[j] = 1;
					}
					
					else if(/>=/.test(SearchArgs[j]) && !isNaN(num_cell_data))
					{
						num_cell_data >= parseFloat(SearchArgs[j].replace(/>=/,"")) ? occurence[j] = 3 : occurence[j] = 1;
					}
					
					else if(/</.test(SearchArgs[j]) && !isNaN(num_cell_data))
					{
						num_cell_data < parseFloat(SearchArgs[j].replace(/</,"")) ? occurence[j] = 3 : occurence[j] = 1;
					}
										
					else if(/>/.test(SearchArgs[j]) && !isNaN(num_cell_data))
					{
						num_cell_data > parseFloat(SearchArgs[j].replace(/>/,"")) ? occurence[j] = 3 : occurence[j] = 1;
					}					
					
					else 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.3</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 a regular 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>Brisbane</td>
    <td>2045</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>