»
Tiếng AnhTiếng PhápTiếng Việt

In - Lọc dữ liệu trong bảng - JavaScriptBank.com

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Lọc dữ liệu trong bảng
URL: https://www.javascriptbank.com/html-table-filter-generator.html

Lọc dữ liệu trong bảng © JavaScriptBank.comHiệu ứng giúp bạn lọc dữ liệu trong bảng dựa vào các số liệu.

Phiên bản đầy đủ: jsB@nk » Biểu mẫu » Bảng » Lọc dữ liệu trong bảng
URL: https://www.javascriptbank.com/html-table-filter-generator.html



CSS
<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-->


JavaScript
<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-->


HTML
<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=&quot;table1&quot;</TT>) to the table and inserting the script below in the <TT>&lt;body&gt;</TT> section:</P><PRE>&lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;   setFilterGrid(&quot;table1&quot;);&lt;/script&gt;</PRE><P>the grid will be generated automatically. The number of filters (<TT>&lt;input&gt;</TT>) is equal to the number of columns (<TT>&lt;td&gt;</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(&quot;table2&quot;,<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-->