HTML Table Filter Generator v1.5

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: <, <=, >, >=.

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

- Demo pages at:
mguglielmi.free.fr/scripts/TableFilter/datademo.htm
mguglielmi.free.fr/scripts/TableFilter/datademo2.htm

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	true / false	boolean	hides "Go" button in the grid (default - true)	`var MyTableFilter = { btn: false }`
btn_text	"my button"	string	changes the text of the button	`var MyTableFilter = { btn_text: "Filter" }`
enter_key	true / false	boolean	disables "enter" key (default - true)	`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'); }}`
display_all_text	"Some text"	string	Sets message for "display all" in drop-down list; (default - empty)	`var MyTableFilter = { display_all_text: "Display all towns" }`
on_change	true / false	boolean	If set true, it will filter the table as you change the value of drop-down list (default - false)	`var MyTableFilter = { on_change: true }`
display_nrows	true / false	boolean	If set true, it will display the total # of rows displayed at the top of the table in left corner (default - false)	`var MyTableFilter = { display_nrows: true }`
nrows_text	"Some text"	string	Sets text of the label for total # of rows displayed (default - "Data rows: ")	`var MyTableFilter = { nrows_text: "Total items: " }`
btn_reset	true / false	boolean	If set true, it will show a "Reset" button at the top of the table in right corner (default - false) allowing users to re-initialise the table	`var MyTableFilter = { btn_reset: true }`
btn_reset_text	"Some text"	string	Sets text for the "Reset" button (default - "Reset")	`var MyTableFilter = { btn_reset_text: "Clear" }`
sort_select	true / false	boolean	If set true, it will sort options in the drop-down list(s) (default - false)	`var MyTableFilter = { sort_select: true }`
paging	true / false	boolean	If set true, it will generate a paging feature	`var MyTableFilter = { paging: true }`
paging_length	25	number	Sets # of rows displayed in a page (default - 10)	`var MyTableFilter = { paging_length: 50 }`
loader	true / false	boolean	If set true, it will display a "loading" message (default - false)	`var MyTableFilter = { loader: true }`
loader_text	"Some text"	string	Sets text for "loading" message (default - "Loading...")	`var MyTableFilter = { loader_text: "Filtering data..." }`
exact_match	true / false	boolean	If set true, only exact matches will be displayed (default - false)	`var MyTableFilter = { exact_match: true }`

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%; font-size:12px; }

/*====================================================
	- filter classes
	- edit classes below to change filters 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%;
}
.inf{ 
	clear:both; width:auto; height:20px; 
	background:#f4f4f4; font-size:11px; 
	margin:0; padding:1px 3px 1px 3px; 
	border:1px solid #ccc;
}
.ldiv{ float:left; width:30%; position:inherit; }
.mdiv{ float:left; width:30%; position:inherit; text-align:center; }
.rdiv{ float:right; width:30%; position:inherit; text-align:right; }
.loader{ 
	position:absolute; padding: 15px 0 15px 0;
	margin-top:7%; width:200px; /*height:50px;*/
	left:40%; z-index:1000; font-size:14px; font-weight:bold;
	border:1px solid #666; background:#f4f4f4; 
	text-align:center; vertical-align:middle;
}
div.mdiv select{ height:20px; }
div.inf a{ color:#CC0000; }
div.inf a:hover{ text-decoration:none; }
.tot{ font-weight:bold; }

</style>

var TblId, StartRow, SearchFlt, ModFn, ModFnId;
var ExactMatchId, ExactMatch, isPageChanged;
TblId = new Array(), StartRow = new Array();
ModFn = new Array(), ModFnId = new Array();
ExactMatchId = new Array(), ExactMatch = new Array();
SlcArgs = new Array(), isPageChanged = false;

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;
	var modfilter_fn, display_allText, on_slcChange;
	var displaynrows, totrows_text, btnreset, btnreset_text;
	var sort_slc, displayPaging, pagingLength, displayLoader;
	var load_text, exactMatch;
	
	f!=undefined && f["btn"]==false ? displayBtn = false : displayBtn = true;//shows/hides button
	f!=undefined && f["btn_text"]!=undefined ? btntext = f["btn_text"] : btntext = "go";//defines button text
	f!=undefined && f["enter_key"]==false ? enterkey = false : enterkey = true;//enables/disables enter key
	f!=undefined && f["mod_filter_fn"] ? modfilter_fn = true : modfilter_fn = false;//defines alternative fn
	f!=undefined && f["display_all_text"]!=undefined ? display_allText = f["display_all_text"] : display_allText = "";//defines 1st option text
	f!=undefined && f["on_change"]==true ? on_slcChange = true : on_slcChange = false;//enables/disables onChange event on combo-box 
	f!=undefined && f["display_nrows"]==true ? displaynrows = true : displaynrows = false;//show/hides rows counter
	f!=undefined && f["nrows_text"]!=undefined ? totrows_text = f["nrows_text"] : totrows_text = "Data rows: ";//defines rows counter text
	f!=undefined && f["btn_reset"]==true ? btnreset = true : btnreset = false;//show/hides reset link
	f!=undefined && f["btn_reset_text"]!=undefined ? btnreset_text = f["btn_reset_text"] : btnreset_text = "Reset";//defines reset text
	f!=undefined && f["sort_select"]==true ? sort_slc = true : sort_slc = false;//enables/disables select options sorting
	f!=undefined && f["paging"]==true ? displayPaging = true : displayPaging = false;//enables/disables table paging
	f!=undefined && f["paging_length"]!=undefined ? pagingLength = f["paging_length"] : pagingLength = 10;//defines table paging length
	f!=undefined && f["loader"]==true ? displayLoader= true : displayLoader = false;//enables/disables loader
	f!=undefined && f["loader_text"]!=undefined ? load_text = f["loader_text"] : load_text = "Loading...";//defines loader text
	f!=undefined && f["exact_match"]==true ? exactMatch= true : exactMatch = false;//enables/disbles exact match for search

if(modfilter_fn) 
	{
		ModFnId.push(id);// used by DetectKey fn
		ModFn.push(f["mod_filter_fn"]);
	}
	
	if(exactMatch)
	{
		ExactMatchId.push(id);// used by DetectKey fn
		ExactMatch.push(exactMatch);
	}

if(displaynrows || btnreset || displayPaging || displayLoader)
	{
		
		/*** div containing rows # displayer + reset btn ***/
		var infdiv = document.createElement("div");
		infdiv.setAttribute("id","inf_"+id);
		infdiv.className = "inf";
		t.parentNode.insertBefore(infdiv, t);
		
		if(displaynrows)
		{
			/*** left div containing rows # displayer ***/
			var totrows;
			var ldiv = document.createElement("div");
			ldiv.setAttribute("id","ldiv_"+id);
			displaynrows ? ldiv.className = "ldiv" : ldiv.style.display = "none";
			displayPaging ? totrows = pagingLength : totrows = getRowsNb(id);
			
			var totrows_span = document.createElement("span"); // tot # of rows displayer 
			totrows_span.setAttribute("id","totrows_span_"+id);
			totrows_span.className = "tot";
			totrows_span.appendChild( document.createTextNode(totrows) );
		
			var totrows_txt = document.createTextNode(totrows_text);
			ldiv.appendChild(totrows_txt);
			ldiv.appendChild(totrows_span);
			infdiv.appendChild(ldiv);
		}
		
		if(displayLoader)
		{
			/*** div containing loader ***/
			var loaddiv = document.createElement("div");
			loaddiv.setAttribute("id","load_"+id);
			loaddiv.className = "loader";
			loaddiv.style.display = "none";
			loaddiv.appendChild(document.createTextNode(load_text));	
			infdiv.appendChild(loaddiv);
		}
				
		if(displayPaging)
		{
			/*** mid div containing paging displayer ***/
			var mdiv = document.createElement("div");
			mdiv.setAttribute("id","mdiv_"+id);
			displayPaging ? mdiv.className = "mdiv" : mdiv.style.display = "none";						
			infdiv.appendChild(mdiv);
			
			var start_row = getStartRow(id);
			var nrows = t.getElementsByTagName("tr").length;
			var npages = Math.ceil( (nrows - start_row)/pagingLength );
			
			var slcPages = document.createElement("select");
			slcPages.setAttribute("id","slcPages_"+id);
			slcPages.onchange = function(){ 
				isPageChanged = true;
				if(displayLoader) showLoader(id,"");
				GroupByPage(id,pagingLength,this.value);
				if(displayLoader) showLoader(id,"none");
			}
			document.getElementById("mdiv_"+id).appendChild( document.createTextNode(" Page ") );
			document.getElementById("mdiv_"+id).appendChild(slcPages);
			document.getElementById("mdiv_"+id).appendChild( document.createTextNode(" of "+npages+" ") );
			for(var t=0; t<npages; t++)
			{
				var currOpt = new Option((t+1),t*pagingLength,false,false);
				document.getElementById("slcPages_"+id).options[t] = currOpt;
			}
						
			GroupByPage(id,pagingLength,0);//calls paging fn
			if(displayLoader) showLoader(id,"none");
		}
		
		if(btnreset)
		{
			/*** right div containing reset button **/	
			var rdiv = document.createElement("div");
			rdiv.setAttribute("id","reset_"+id);
			btnreset ? rdiv.className = "rdiv" : rdiv.style.display = "none";
			
			var fltreset = document.createElement("a");
			fltreset.setAttribute("href","javascript:clearFilters('"+id+"');Filter('"+id+"','"+exactMatch+"');");
			fltreset.appendChild(document.createTextNode(btnreset_text));
			rdiv.appendChild(fltreset);
			infdiv.appendChild(rdiv);
		}
		
	}//if

for(var i=0; i<n; i++)
	{
		var fltcell = fltrow.insertCell(i);
		fltcell.noWrap = true;
		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,display_allText,sort_slc,displayPaging);
			if(displayPaging)//stores arguments for GroupByPage() fn
			{
				var args = new Array();
				args.push(id); args.push(i); args.push(n);
				args.push(display_allText); args.push(sort_slc); args.push(displayPaging);
				SlcArgs.push(args);
			}
			if(enterkey) slc.onkeypress = DetectKey;
			if(on_slcChange) {(!modfilter_fn) ? slc.onchange = function(){ Filter(id,exactMatch); } : slc.onchange = f["mod_filter_fn"];} 
		}
		
		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,exactMatch); } : btn.onclick = f["mod_filter_fn"];					
		}//if		
		
	}// for i
	
}

function Filter(id,ematch)
/*====================================================
	- 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
=====================================================*/
{	
	showLoader(id,"");
	getFilters(id);
	var t = document.getElementById(id);
	var SearchArgs = new Array();
	var ncells = getCellsNb(id);
	var totrows = getRowsNb(id), hiddenrows = 0;
	
	for(var i=0; i<SearchFlt.length; i++)
		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] = true : occurence[j] = false;
					}
					
					else if(/>=/.test(SearchArgs[j]) && !isNaN(num_cell_data))
					{
						num_cell_data >= parseFloat(SearchArgs[j].replace(/>=/,"")) ? occurence[j] = true : occurence[j] = false;
					}
					
					else if(/</.test(SearchArgs[j]) && !isNaN(num_cell_data))
					{
						num_cell_data < parseFloat(SearchArgs[j].replace(/</,"")) ? occurence[j] = true : occurence[j] = false;
					}
										
					else if(/>/.test(SearchArgs[j]) && !isNaN(num_cell_data))
					{
						num_cell_data > parseFloat(SearchArgs[j].replace(/>/,"")) ? occurence[j] = true : occurence[j] = false;
					}					
					
					else 
					{
						var regexp;
						if(ematch) regexp = new RegExp('(^)'+SearchArgs[j]+'($)',"gi");
						else regexp = new RegExp(SearchArgs[j],"gi");
						occurence[j] = regexp.test(cell_data);
					}
				}//if SearchArgs
			}//for j
			
			for(var t=0; t<ncells; t++)
			{
				if(SearchArgs[t]!="" && !occurence[t]) isRowValid = false;
			}//for t
			
		}//if

/*** checks if table is paged and displays rows ***/
		var isPaged = row[k].getAttribute("paging"); //retrieves paging attribute
		if(isPaged != null && isPaged != "")
		{
			if( !isRowValid && isPaged=="false" ) { row[k].style.display = "none"; hiddenrows++; }
			else if( isRowValid && isPaged=="true" ) row[k].style.display = ""; 
			else if( isRowValid && isPaged=="false" ){ row[k].style.display = "none"; hiddenrows++; }
			else { row[k].style.display = "none"; hiddenrows++; }
		} else {
			if(!isRowValid) { row[k].style.display = "none"; hiddenrows++; }
			else row[k].style.display = "";
		}
		
	}// for k

/*** refreshes tot # of rows displayer ***/
	showTotRowsN(id,parseInt(totrows - hiddenrows));
	
	showLoader(id,"none");
}

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 getRowsNb(id)
/*====================================================
	- returns total nb of rows for a given table
=====================================================*/
{
	var t = document.getElementById(id);
	var s = getStartRow(id);
	var ntrs = t.getElementsByTagName("tr").length;
	return parseInt(ntrs-s);
}

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 clearFilters(id)
/*====================================================
	- clears grid filters
=====================================================*/
{
	getFilters(id);
	for(i in SearchFlt) document.getElementById(SearchFlt[i]).value = "";
}

function showLoader(id,p)
/*====================================================
	- displays/hides loader div
=====================================================*/
{
	var loaderdiv = document.getElementById("load_"+id);
	if(loaderdiv != null && p=="none")
		setTimeout("document.getElementById('load_"+id+"').style.display = '"+p+"'",250);
	else if(loaderdiv != null && p!="none") loaderdiv.style.display = p;
}

function showTotRowsN(id,p)
/*====================================================
	- Shows total number of filtered rows
=====================================================*/
{
	var totrows_displayer = document.getElementById("totrows_span_"+id);
	if(totrows_displayer != null && totrows_displayer.nodeName.toLowerCase() == "span" ) 
		totrows_displayer.innerHTML = p;
}

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;
}

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

<h1>HTML Table Filter Generator v1.5</h1>
- Description page at: 
<a href="http://mguglielmi.free.fr/scripts/TableFilter/?l=en" target="_blank">mguglielmi.free.fr/scripts/TableFilter/?l=en</a>

- Demo pages at: 
<a href="http://mguglielmi.free.fr/scripts/TableFilter/datademo.htm" target="_blank">mguglielmi.free.fr/scripts/TableFilter/datademo.htm</a> 
<a href="http://mguglielmi.free.fr/scripts/TableFilter/datademo2.htm" target="_blank">mguglielmi.free.fr/scripts/TableFilter/datademo2.htm</a>

Here you have an example of a regular html table:

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

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

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

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

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

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

</tr>

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

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

<tr>
<td>Adelaide</td>

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

</table>

Below a few examples of the same table with a filtering grid generated automatically:

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

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

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

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

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

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

</tr>

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

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

<tr>
<td>Adelaide</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">This is the table caption </td>
 </tr>
 <tr> 
 <td>From</td>
 <td>Destination</td>
 <td>Road Distance (km)</td>
 <td>By Air (hrs)</td>
 <td width="10%">By Car/Coach (hrs)</td>
 <td width="30%">By Rail (hrs)</td>
 </tr>
 <tr> 
 <td>Sydney</td>
 <td>Adelaide</td>
 <td>1412</td>
 <td>1.4</td>
 <td>24</td>
 <td>25.3</td>
 </tr>
 <tr> 
 <td>Sydney</td>
 <td>Brisbane</td>
 <td>982</td>
 <td>1.5</td>
 <td>17</td>
 <td>16</td>
 </tr>
 <tr> 
 <td>Sydney</td>
 <td>Canberra</td>
 <td>286</td>
 <td>.6</td>
 <td>4.2</td>
 <td>4.3</td>
 </tr>
 <tr> 
 <td>Sydney</td>
 <td>Melbourne</td>
 <td>872</td>
 <td>1.1</td>
 <td>14.3</td>
 <td>10.5</td>
 </tr>
 <tr> 
 <td>Adelaide</td>
 <td>Perth</td>
 <td>2781</td>
 <td>3.1</td>
 <td>35</td>
 <td>38</td>
 </tr>
 <tr> 
 <td>Adelaide</td>
 <td>Alice Springs</td>
 <td>1533</td>
 <td>2</td>
 <td>20</td>
 <td>20.25</td>
 </tr>
 <tr> 
 <td>Adelaide</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">This is the table caption </td>
 </tr>
 <tr>
 <td> </td>
 <td>From</td>
 <td>Destination</td>
 <td>Road Distance (km)</td>
 <td>By Air (hrs)</td>
 <td width="10%">By Car/Coach (hrs)</td>
 <td width="30%">By Rail (hrs)</td>
 </tr>
 <tr>
 <td>1.</td>
 <td>Sydney</td>
 <td>Adelaide</td>
 <td>1412</td>
 <td>1.4</td>
 <td>24</td>
 <td>25.3</td>
 </tr>
 <tr>
 <td>2.</td>
 <td>Sydney</td>
 <td>Brisbane</td>
 <td>982</td>
 <td>1.5</td>
 <td>17</td>
 <td>16</td>
 </tr>
 <tr>
 <td>3.</td>
 <td>Sydney</td>
 <td>Canberra</td>
 <td>286</td>
 <td>.6</td>
 <td>4.2</td>
 <td>4.3</td>
 </tr>
 <tr>
 <td>4.</td>
 <td>Sydney</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>Adelaide</td>
 <td>Perth</td>
 <td>2781</td>
 <td>3.1</td>
 <td>35</td>
 <td>38</td>
 </tr>
 <tr>
 <td>6.</td>
 <td>Adelaide</td>
 <td>Alice Springs</td>
 <td>1533</td>
 <td>2</td>
 <td>20</td>
 <td>20.25</td>
 </tr>
 <tr>
 <td>7.</td>
 <td>Adelaide</td>
	<td>Brisbane</td>
 <td>2045</td>
 <td>2.15</td>
 <td>33.3</td>
 <td>40</td>
 </tr>
</table>

- Description page at: 
<a href="http://mguglielmi.free.fr/scripts/TableFilter/?l=en" target="_blank">mguglielmi.free.fr/scripts/TableFilter/?l=en</a>

- Demo pages at: 
<a href="http://mguglielmi.free.fr/scripts/TableFilter/datademo.htm" target="_blank">mguglielmi.free.fr/scripts/TableFilter/datademo.htm</a> 
<a href="http://mguglielmi.free.fr/scripts/TableFilter/datademo2.htm" target="_blank">mguglielmi.free.fr/scripts/TableFilter/datademo2.htm</a>