Hspb . Net

Trang chủ

Tin tức Việt Nam

Truyền hình

Trò chơi

Rao vặt

Trang chủ  /  Tin IT trong nước

Lọc dữ liệu trong bảng

Share |
30-03-2010

Hiệu ứng giúp bạn lọc dữ liệu trong bảng dựa vào các số liệu.
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<=6
		fltcell.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 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]);
				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) 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 given
	element (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
	-->

Share |
Nguồn bài viết: JavaScriptBank.com

Tìm hiểu thêm:

Gửi bình luận của bạn

Họ tên bạn :

Email (*):
 

Nội dung (*):
 


Reload Image
Mã bảo mật:

Các bài cũ: