關於jQuery實現表格內容過濾搜索功能，大概思路上是這樣的。
在表格上方提供一個搜索框，供用戶輸入。用戶邊輸入邊篩選表格內容，並對匹配中的內容進行着色（我簡單的對表格篩選中的內容進行了字體加粗並添加了背景色）。
本例子只是一個簡單的table布局。而現實項目的例子可能是div布局，所以，本文只是提供一個簡單的思路。供讀者參考：
- 首先：在文本框上監聽一個keyup事件，當用戶按下按鈕時觸發。
-
- 獲取文本框中的值，對文本框中的值進行去除首尾空格。
- 然后，如果文本框中的值是空值時，比如：用戶輸入backspace。那么就是沒有關鍵字的情況，這時，表格的內容應該完全顯示。
- 然后：當用戶輸入的關鍵字不為空時，對table的每一行進行條件篩選。使得匹配的行顯示，不匹配的行隱藏掉。
-
- 首先，將table中tbody中的內容全部隱藏。
- 對tr的每一行進行過濾，只要tr中有一個單元格的內容包含用戶輸入的關鍵字。那么整行tr顯示。
關鍵是怎么過濾呢？我用的是jQuery中的filter()方法：
關於filter()方法jQuery中是這樣描述的：
返回值:jQueryfilter(expr|obj|ele|fn)
概述
篩選出與指定表達式匹配的元素集合。
這個方法用於縮小匹配的范圍。用逗號分隔多個表達式
參數
exprStringV1.0
字符串值，包含供匹配當前元素集合的選擇器表達式。
jQuery objectobjectV1.0
現有的jQuery對象，以匹配當前的元素。
element ExpressionV1.4
一個用於匹配元素的DOM元素。
function(index) FunctionV1.4
一個函數用來作為測試元素的集合。它接受一個參數index，這是元素在jQuery集合的索引。在函數， this指的是當前的DOM元素。
w3c中是這樣描述的：
使用過濾函數
定義和用法
filter() 方法將匹配元素集合縮減為匹配指定選擇器的元素。
第一種：接收一個字符串值，該字符串是包含供匹配當前元素集合的選擇器表達式。
使用該方法的第二個形式是，通過函數而不是選擇器來篩選元素。對於每個元素，如果該函數返回 true，則元素會被包含在已篩選集合中；否則，會排除這個元素。如果給定表示 DOM 元素集合的 jQuery 對象，.filter() 方法會用匹配元素的子集構造一個新的 jQuery 對象。所使用的選擇器會測試每個元素；所有匹配該選擇器的元素都會包含在結果中。
在本例子中，我給了filter一個函數作為參數；通過上面的描述，我只要讓傳入filter()函數的參數函數執行完后返回true.那么，返回true的元素就是我們要的顯示的數據。
那么如何通過一系列的運算，返回true呢？我想，大部分人已經想到了，那就是通過尋找tr中每個td的innerHTML來匹配用戶輸入的文本框的值。
匹配很簡單，我只用了一個stringObject.indexOf()函數,如果stringObject.indexOf()返回值>-1，說明原字符串中存在着要尋找的字符串。
下一步就是找到后，給找到的字符着色。我用了stringObject.replace()方法。該方法可以接收一個function作為參數，用來對所匹配到的字符進行處理。
我把匹配的字符外層包裹一個span標簽，再重新設置一個span標簽父元素的innerHTML的值。在設置span標簽的樣式。這樣就很明顯的看出來，我要匹配的字符到底是哪些了。
但是呢，這樣做有一個問題。就是如果我這次匹配不是第一次匹配的話，那原本的td呢會有前面匹配的標記(背景色和字體加粗)。所以，必須要在新匹配元素之前，將上一次的匹配內容去掉。去掉上一次匹配內容和過濾出匹配內容處理方式是一致的。就不贅述了~~
好了，大致思路說完了，那直接貼上效果圖和源碼。供大家參考：
效果圖：
輸入關鍵字后：
本例子中主要用到的是jQuery的keyup()、each()和filter()方法。除此之外，還用到了javascript的RegExp對象和stringObject.replace()方法
源碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <style type="text/css"> body{ font: normal 12px Arial; } table th{ width: 100px; border-bottom: 1px solid; text-align:center; } table .matched{ font-weight:bolder; background-color:lightpink; } table tr{ text-align:left; } </style> <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#filterName").keyup(function () { var keyValue = $(this).val().trim(); var $input = $(this); clearTable(); if (!keyValue.length) { $("table tbody tr").show(); return false; }; $("table tbody tr").hide() .filter(function (index) { var _ = $(this); var f = false; f = (function () { try { $.each(_.children(), function () { var __ = $(this); var v = __.html(); var flag = false; flag = (function () { try { $.each(keyValue, function (index, value) { if (v.indexOf(value) > -1) {//存在 var reg = new RegExp(value,"gi"); v = v.replace(reg,function(word){ return "<span class='matched'>"+word+"</span>"; }); __.html(v); throw (e); } }); } catch (e) { return true; } })(); if (flag) throw (e); }); } catch (e) { return true; } })(); return f; }).show(); }); function clearTable(){ $("table tbody tr").each(function(){ $(this).children().each(function(){ if($(this).children("span").length > 0){ var target = $(this).children("span"); target.replaceWith(target.html()); } }); }); } }); </script> </head> <body> <div> <br/> 篩選： <input id="filterName" /> <br/> </div> <table> <thead> <tr><th>姓名</th><th>性別</th><th>暫住地</th></tr> </thead> <tbody> <tr><td>張山</td><td>男</td><td>浙江寧波</td></tr> <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr> <tr><td>王五</td><td>男</td><td>湖南長沙</td></tr> <tr><td>找六</td><td>男</td><td>浙江溫州</td></tr> <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr> <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr> <tr><td>王六</td><td>男</td><td>浙江杭州</td></tr> <tr><td>李字</td><td>女</td><td>浙江杭州</td></tr> <tr><td>李四</td><td>男</td><td>湖南長沙</td></tr> </tbody> </table> </body> </html>