« »

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

Nhãn: Lọc dữ liệu trong bảng

Demo
Phóng to
Tải lại
Cửa sổ mới

Tạo video bằng AI chỉ với giọng nói hoặc văn bản

Ứng dụng video AI MIỄN PHÍ hàng đầu của bạn! Tự động hóa video AI đầu tiên của bạn. Tạo Video Chuyên Nghiệp Của Bạn Trong 5 Phút Bằng AI Không Cần Thiết Bị Hoặc Kỹ Năng Chỉnh Sửa Video. Sản xuất video dễ dàng dành cho nhà tiếp thị nội dung. Ứng dụng video AI KHÔNG GIỚI HẠN miễn phí trong tay bạn

Mã nguồn
CSS
JavaScript
HTML
In

Copy All x2

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

Copy All x2

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

Copy All x2

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

Lời bình (0)
Viết

bởi Xem

Hủy phản hồi

Viết lời bình của bạn

Tiêu đề bình luận

Tôi khẳng định 100% là người thực
Tôi lặp lại tôi không phải là công cụ máy

Lượt gửi (0)
Mới

BBCode
HTML
URL
JID

Ứng dụng AI Video.com
Tạo video doanh nghiệp của bạn bằng AI chỉ với giọng nói hoặc văn bản

chatGPTaz.com
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn

Ứng dụng AI Video
Ứng dụng video AI MIỄN PHÍ đầu tiên của bạn

Deepfake Video
Deepfake AI Video Maker

Deepfake
Deepfake AI Video Maker

AI Deep Fake
Deepfake AI Video Maker

AIvidio
AI Video Mobile Solutions

AIvideos
AI Video Platform & Solutions

AIvedio
AI Video App Maker

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Artificial General Intelligence
Ai and higher level Artificial General Intelligence (AGI)

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Faceswap AI trực tuyến
Đổi mặt Video, Ảnh & GIF ngay lập tức với Công cụ AI mạnh mẽ - Faceswap AI Trực tuyến MIỄN PHÍ

Powerful AI Presentation PPT Maker for FREE
Build an impressive presentation with our free online AI presentation app

Your next top AI Assistant
Claude AI, developed by Anthropic

Your next top AI Assistant
Claude AI, developed by Anthropic

Temu tặng $500 cho người dùng mới
Claim Free Temu $500 Credit via Affiliate & Influencer Program

Tín dụng quảng cáo TikTok miễn phí
Làm chủ quảng cáo TikTok cho hoạt động tiếp thị doanh nghiệp của bạn

Dall-E-OpenAI.com
Tự động tạo ra hình ảnh sáng tạo với AI

chatGPT4.win
Nói chuyện với ChatGPT bằng ngôn ngữ mẹ đẻ của bạn

Sản phẩm AI đầu tiên của Elon Musk - Grok/UN.com
Nói chuyện với Grok AI Chatbot bằng ngôn ngữ của bạn

Công cụ.win
Mở trung tâm công cụ miễn phí để mọi người sử dụng với hàng trăm công cụ

GateIO.gomymobi.com
Airdrop miễn phí để nhận, chia sẻ lên đến 150.000 đô la cho mỗi dự án

iPhoneKer.com
Tiết kiệm tới 630$ khi mua iPhone 16 mới

Mua Robot Tesla Optimus
Đặt mua Tesla Bot: Robot Optimus Gen 2 ngay hôm nay với giá dưới 20.000 đô la

Cool Domains for Sale!

lend.services index.services chatGPTaz.com ApexBTC.com CreditCard.rip javascriptON.com JavaScriptBank.com CTRCoin.com Card.rip MetaTru.com gomymobi.com hearf.com war.money XMQV.com system.money eChainBank.com ABP3.com gomymobi.com chatGPT2.fun AIvideo-app.com chatGPT4.win ChatTotal.com AI-Trading-Bot.com GrokUN.com ZWVQ.com gomy.mobi pornID.net ChainTutor.com CryptoKD.com gomy.mobi Dall-E-OpenAI.com

Ngày cập nhật:
Tác giả:
Lượt xem:
Lời bình:
Lượt đánh giá:
Lượt gửi:
Kích thước:
Thứ hạng:

30/01/2007
Max Guglielmi [more]
7,220
0
0
0
27.34 KBytes

JavaScript Lọc dữ liệu trong bảng - Ngôn ngữ: tiếng Việt

0/5 0 lượt đánh giá / 7,220 lượt xem / 0 lời bình 30/01/2007 Hiệu ứng giúp bạn lọc dữ liệu trong bảng dựa vào các số liệu....JavaScript Lọc dữ liệu trong bảng - Lọc dữ liệu trong bảng - Ngôn ngữ: tiếng Việt

hoivv phuongtuan2208[2] bluesky88 citapotter yennq

Hãy là thành viên đầu tiên làm điều này

bluesky88 citapotter saomai