快捷導(dǎo)航

jquery表格內(nèi)容篩選實(shí)現(xiàn)思路及代碼

更新時(shí)間：2013年04月16日 15:28:21 作者：

基于jquery實(shí)現(xiàn)表格內(nèi)容篩選，本文采用兩種方式實(shí)現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)jquery篩選有所幫助

 
篩選：<input type="text" id="sea" /> 
<table width="100%" id="se"> 
<thead> 
<tr><th></th><th>姓名</th><th>性別</th><th>地址</th></tr> 
</thead> 
<tbody> 
<tr class="parent" id="row_01"><td colspan="3">一班</td></tr> 
<tr class="child_row_01"><td></td><td>大爺</td><td>男10</td><td>武漢1</td></tr> 
<tr class="child_row_01"><td></td><td>大爺</td><td>男9</td><td>武漢2</td></tr> 
<tr class="child_row_01"><td></td><td>大爺</td><td>男8</td><td>武漢3</td></tr> 
<tr class="parent" id="row_02"><td colspan="3">二班</td></tr> 
<tr class="child_row_02"><td></td><td>大爺</td><td>男7</td><td>武漢4</td></tr> 
<tr class="child_row_02"><td></td><td>大爺</td><td>男6</td><td>武漢5</td></tr> 
<tr class="child_row_02"><td></td><td>大爺</td><td>男5</td><td>武漢6</td></tr> 
<tr class="child_row_02"><td></td><td>大爺</td><td>男4</td><td>武漢7</td></tr> 
<tr class="parent" id="row_03"><td colspan="3">三班</td></tr> 
<tr class="child_row_03"><td></td><td>大爺</td><td>男3</td><td>武漢8</td></tr> 
<tr class="child_row_03"><td></td><td>大爺</td><td>男2</td><td>武漢9</td></tr> 
<tr class="child_row_03"><td></td><td>大爺</td><td>男1</td><td>武漢10</td></tr> 
</tbody> 
</table> 
<script type="text/javascript" > 
$(function(){ 
$("#sea").keyup(function(){ 
$("#se tbody tr").hide().filter(":contains('"+$(this).val()+"')").show(); 
}).keyup(); 
}); 
</script> 

復(fù)制代碼代碼如下:

 
// jquery表格內(nèi)容篩選 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="../css/jquery-1.6.2.js"></script> 
<script> 
$(function(){ 
$('tr.parent').click(function(){ 
$(this).toggleClass("selected").siblings('.child_'+this.id).toggle(); 
}); 
}); 
</script> 
<style> 
.selected{background:red}; 
</style> 
<title>Untitled Document</title> 
</head> 
<body> 
<table> 
<thead> 
<tr> 
<th>姓名</th> 
<th>年齡</th> 
</tr> 
</thead> 
<tbody> 
<tr class="parent" id="row_01"> 
<td colspan="2">人力部</td> 
</tr> 
<tr class="child_row_01"> 
<td >腳本</td> 
<td>20</td> 
</tr> 
<tr class="child_row_01"> 
<td >腳本</td> 
<td >20</td> 
</tr> 
<tr class="child_row_01"> 
<td >腳本</td> 
<td >20</td> 
</tr> 
<tr class="parent" id="row_02"> 
<td colspan="2">技術(shù)部</td> 
</tr> 
<tr class="child_row_02"> 
<td >腳本</td> 
<td >20</td> 
</tr> 
<tr class="child_row_02"> 
<td >腳本</td> 
<td >20</td> 
</tr> 
<tr class="child_row_02"> 
<td >腳本</td> 
<td >20</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery帶控制按鈕輪播圖插件
這篇文章主要為大家詳細(xì)介紹了jQuery帶控制按鈕輪播圖插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-07-07
影響jQuery使用的14個(gè)方面
jQuery的插件提供了一個(gè)很好的方法，節(jié)省了時(shí)間和簡(jiǎn)化了開發(fā)，避免程序員從頭開始編寫每個(gè)組件。但是，插件也將一個(gè)不穩(wěn)定因素引入代碼中。一個(gè)好的插件節(jié)省了無數(shù)的開發(fā)時(shí)間，一個(gè)質(zhì)量不好的插件會(huì)導(dǎo)致修復(fù)錯(cuò)誤的時(shí)間比實(shí)際從頭開始編寫組件的時(shí)間還長(zhǎng)。
2014-09-09
jquery插件格式實(shí)例分析
這篇文章主要介紹了jquery插件格式,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery插件的結(jié)構(gòu)與開發(fā)技巧,并附帶了一本相關(guān)電子書供讀者下載參考,需要的朋友可以參考下
2016-06-06
jquery調(diào)用asp.net 頁(yè)面后臺(tái)的實(shí)現(xiàn)代碼
前一篇介紹jquery調(diào)用webservice，這一篇引用的是用jquery直接調(diào)用aspx后臺(tái)方法。
2011-04-04
文本框水印提示效果的簡(jiǎn)單實(shí)現(xiàn)代碼
本篇文章主要是對(duì)文本框水印提示效果的簡(jiǎn)單實(shí)現(xiàn)代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2014-02-02
收集的10個(gè)免費(fèi)的jQuery相冊(cè)
或許在網(wǎng)絡(luò)上你已經(jīng)見過數(shù)百種通過jQuery實(shí)現(xiàn)的相冊(cè)，但是我們發(fā)現(xiàn)的這些相冊(cè)，他們有額外的東西，優(yōu)雅和獨(dú)特的創(chuàng)意！每個(gè)相冊(cè)都是可在線預(yù)覽和免費(fèi)下載的。你可以為你的Web項(xiàng)目添加色彩。
2011-02-02
jquery $.ajax()取xml數(shù)據(jù)的小問題解決方法
今天想做一個(gè)用$.ajax()從xml中讀取數(shù)據(jù)的這么一個(gè)異步交互過程
2010-11-11
jquery validate表單驗(yàn)證的基本用法入門
這篇文章主要為大家介紹了jquery validate表單驗(yàn)證的基本用法入門，jQuery Validate 插件為表單提供了強(qiáng)大的驗(yàn)證功能，讓客戶端表單驗(yàn)證變得更簡(jiǎn)單，同時(shí)提供了大量的定制選項(xiàng)，滿足應(yīng)用程序各種需求，感興趣的小伙伴們可以參考一下
2016-01-01
jQuery實(shí)現(xiàn)仿騰訊迷你首頁(yè)選項(xiàng)卡效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿騰訊迷你首頁(yè)選項(xiàng)卡效果代碼,可實(shí)現(xiàn)tab切換按鈕的左右滑動(dòng)顯示及點(diǎn)擊切換效果,涉及jQuery基于鼠標(biāo)事件實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)操作技巧,需要的朋友可以參考下
2015-09-09
HTML+jQuery實(shí)現(xiàn)簡(jiǎn)單的登錄頁(yè)面
這篇文章主要介紹了用三種方法實(shí)現(xiàn)簡(jiǎn)單的登錄頁(yè)面的制作：純HTML、HTML+jQuery(form data)格式、HTML+jQuery(json)格式。感興趣的同學(xué)可以跟隨小編一起學(xué)習(xí)一下
2021-12-12