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