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篩選有所幫助
復(fù)制代碼 代碼如下:
篩選：<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>
您可能感興趣的文章:
- JQuery篩選器全系列介紹
- jQuery篩選器children()案例詳解(圖文)
- jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象
- jQuery多條件篩選如何實(shí)現(xiàn)
- jquery實(shí)現(xiàn)多條件篩選特效代碼分享
- jQuery選擇器之屬性篩選選擇器用法詳解
- 基于jQuery實(shí)現(xiàn)表格內(nèi)容的篩選功能
- 基于JQuery的一句代碼實(shí)現(xiàn)表格的簡(jiǎn)單篩選
- JS Jquery 遍歷,篩選頁(yè)面元素 自動(dòng)完成(實(shí)現(xiàn)代碼)
- jquery數(shù)組過(guò)濾篩選方法grep()簡(jiǎn)介
- jQuery 篩選器簡(jiǎn)單操作示例
相關(guān)文章
jQuery on()方法示例及jquery on()方法的優(yōu)點(diǎn)
使用jquery on()方法綁定事件是官方推薦的一種方法，接下來(lái)跟著小編來(lái)學(xué)習(xí)jquery on()方法，小伙伴快來(lái)一起學(xué)習(xí)吧2015-08-08
下面小編就為大家?guī)?lái)一篇對(duì)jQuary選擇器的全面總結(jié)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
本文給大家匯總介紹了一下Jquery使用小技巧，算是比較全面了，一共26個(gè)小店，非常細(xì)致,需要的朋友可以參考下2015-12-12
利用jqgrid實(shí)現(xiàn)上移下移單元格功能
這篇文章主要給大家介紹了關(guān)于如何利用jqgrid實(shí)現(xiàn)上移下移單元格功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
jQuery的實(shí)現(xiàn)原理的模擬代碼 -5 Ajax
對(duì)于 xhr 對(duì)象來(lái)說(shuō)，我們主要通過(guò)異步方式訪問(wèn)服務(wù)器，在 onreadystatechange 事件中處理服務(wù)器回應(yīng)的內(nèi)容。簡(jiǎn)單的 xhr 使用如下所示。2010-08-08
在《彈出層之1：JQuery.Boxy (一)》中講到了JQuery.Boxy的基本用法，本次講下手動(dòng)創(chuàng)建實(shí)例，new一個(gè)boxy對(duì)象是很容易的，傳遞一些參數(shù)對(duì)象就能滿足不同的需求了。2011-10-10
JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用示例
這篇文章主要介紹了JQuery樣式操作、click事件以及索引值-選項(xiàng)卡應(yīng)用,結(jié)合實(shí)例形式分析了jQuery動(dòng)態(tài)修改css樣式、事件響應(yīng)以及選項(xiàng)卡相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
jquery實(shí)現(xiàn)圖片等比例縮放以及max-width在ie中不兼容解決
圖片等比例縮放在某些情況下還是比較事用的,不過(guò)max-width和max-height在ie6中不兼容問(wèn)題很是郁悶，接下來(lái)使用jQuery解決這個(gè)問(wèn)題，感興趣的各位可以參考下哈2013-03-03
JQuery設(shè)置時(shí)間段下拉選擇實(shí)例
這篇文章主要介紹了JQuery設(shè)置時(shí)間段下拉選擇的實(shí)現(xiàn)方法,實(shí)例分析了根據(jù)時(shí)間段設(shè)置下拉選項(xiàng)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了jQuery中:animated選擇器用法,實(shí)例分析了:animated選擇器的功能、定義及匹配動(dòng)畫效果元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12