Full version: jsB@nk » Form » Table » HTML Table Filter Generator
URL: https://www.javascriptbank.com/html-table-filter-generator.html
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.
Full version: jsB@nk » Form » Table » HTML Table Filter Generator
URL: https://www.javascriptbank.com/html-table-filter-generator.html
<STYLE type=text/css media=screen>CAPTION {PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 10px 0px 0px 5px; PADDING-TOP: 10px; TEXT-ALIGN: left}A.btn {BORDER-RIGHT: #ccc 1px outset; PADDING-RIGHT: 1px; BORDER-TOP: #ccc 1px outset; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; MARGIN: 1px; BORDER-LEFT: #ccc 1px outset; COLOR: #666; PADDING-TOP: 1px; BORDER-BOTTOM: #ccc 1px outset; BACKGROUND-COLOR: #cccccc; TEXT-DECORATION: none}.flt {BORDER-RIGHT: #ccc 1px inset; BORDER-TOP: #ccc 1px inset; MARGIN: 0px; BORDER-LEFT: #ccc 1px inset; WIDTH: 100%; BORDER-BOTTOM: #ccc 1px inset; BACKGROUND-COLOR: #f4f4f4}.flt_s {BORDER-RIGHT: #ccc 1px inset; BORDER-TOP: #ccc 1px inset; MARGIN: 0px; BORDER-LEFT: #ccc 1px inset; WIDTH: 90%; BORDER-BOTTOM: #ccc 1px inset; BACKGROUND-COLOR: #f4f4f4}</STYLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT language=javascript type=text/javascript>/*====================================================- HTML Table Filter Generator v1.0- By Max Guglielmi- mguglielmi.free.fr- please do not change this comment=====================================================*/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);}}function AddRow(id,n)/*====================================================- 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 = "flt";for(var i=0; i<n; i++){var fltcell = fltrow.insertCell(i);var inp = document.createElement("input");inp.setAttribute("id","flt"+i+"_"+id);inp.setAttribute("type","text");//inp.setAttribute("class","flt"); //doesn't seem to work on ie<=6fltcell.appendChild(inp);if(i==n-1) inpclass = "flt_s";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 trand compares to search string for currentcolumn- 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 jfor(var t=0; t<ncells; t++){if(SearchArgs[t]!="" && occurence[t]<2){isRowValid = false;}}//for t}//ifif(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 getChildElms(n)/*====================================================- checks passed node is a ELEMENT_NODE nodeType=1- removes TEXT_NODE nodeType=3 =====================================================*/{if(n.nodeType == 1){var enfants = n.childNodes;for(var i=0; i<enfants.length; i++){var child = enfants[i];if(child.nodeType == 3) n.removeChild(child);}return n;}}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();}function DetectKey(e){/*====================================================- common fn that detects return key for a givenelement (onkeypress attribute on input)=====================================================*/var evt=(e)?e:(window.event)?window.event:null;if(evt){var key=(evt.charCode)?evt.charCode:((evt.keyCode)?evt.keyCode:((evt.which)?evt.which:0));if(key=="13"){var tblid = this.getAttribute("id").split("_")[1];Filter(tblid);}}}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><TABLE cellSpacing=2 cellPadding=2 border=2> <TBODY> <TR vAlign=top bgColor=#ffff99> <TH>From</TH> <TH>Destination</TH> <TH>Road Distance (km)</TH> <TH>By Air (hrs)</TH> <TH>By Car/Coach (hrs)</TH> <TH>By Rail (hrs)</TH></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 vAlign=top> <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 bgColor=#ffffcc>Brisbane</TD> <TD>2045</TD> <TD>2.15</TD> <TD>33.3</TD> <TD>40</TD></TR></TBODY></TABLE><P>Below is the same table with a filtering grid generated automatically:</P><TABLE id=table1 cellSpacing=2 cellPadding=2 border=2> <TBODY> <TR vAlign=top bgColor=#ffff99> <TH>From</TH> <TH>Destination</TH> <TD><STRONG>Road Distance (km)</STRONG></TD> <TH>By Air (hrs)</TH> <TH>By Car/Coach (hrs)</TH> <TH>By Rail (hrs)</TH></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 bgColor=#ffffcc>Brisbane</TD> <TD>2045</TD> <TD>2.15</TD> <TD>33.3</TD> <TD>40</TD></TR></TBODY></TABLE><SCRIPT language=javascript type=text/javascript>//<![CDATA[setFilterGrid("table1");//]]></SCRIPT><P>By adding an <TT>id</TT> (<TT>id="table1"</TT>) to the table and inserting the script below in the <TT><body></TT> section:</P><PRE><script language="javascript" type="text/javascript"> setFilterGrid("table1");</script></PRE><P>the grid will be generated automatically. The number of filters (<TT><input></TT>) is equal to the number of columns (<TT><td></TT>).</P><P>If your document contains several tables (like this page), it is important to define unique ids, otherwise the script will not work properly.</P><P>The <TT>setFilterGrid("table2",<STRONG>1</STRONG>)</TT> function accepts an additional parameter that tells the function which reference row to use in order to generate the right number of filters:</P><TABLE id=table2 cellSpacing=2 cellPadding=2 border=2> <TBODY> <TR vAlign=top bgColor=#ffff99> <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><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> <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 bgColor=#ffffcc colSpan=2>Brisbane2045</TD> <TD>2.15</TD> <TD>33.3</TD> <TD>40</TD></TR></TBODY></TABLE><SCRIPT language=javascript type=text/javascript>//<![CDATA[setFilterGrid("table2",1);//]]></SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->