JQuery学习笔记20——表格内容筛选

表格内容筛选需要用到两个选择器：
1.contains：能匹配包含指定文本的元素
2.filter：筛选出与指定表达示匹配的元素集合
filter(":contains('王')");
一.简单的筛选效果
1.表格内容：
<tr class="parent" id="row_01"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_01"><td>王五</td><td>男</td><td>浙江宁波</td></tr>
<tr class="parent" id="row_02"><td colspan="3">前台设计组</td></tr>
<tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
<tr class="child_row_02"><td>王山</td><td>男</td><td>浙江宁波</td></tr>
2.所表格除thead内容外全部隐藏
$("table tbody tr").hide();
3.将表格行中有“王”字的表格行显示
$("table tbody tr").filter(":contains('王')").show();
完整代码：
Code
二.根据文本框中输入的内容筛选表格行
最终效果是：与文本框中输入的内容相匹配的表格行高亮显示。
1.在前面表格的基础上添加文本框
<input type="text" id="filtername"/>
    <thead>
        <tr><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>浙江宁波</td></tr>
        <tr class="child_row_01"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
        <tr class="child_row_01"><td>王五</td><td>男</td><td>浙江宁波</td></tr>
        <tr class="parent" id="row_02"><td colspan="3">前台设计组</td></tr>
        <tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
        <tr class="child_row_02"><td>张山</td><td>男</td><td>浙江宁波</td></tr>
        <tr class="child_row_02"><td>王山</td><td>男</td><td>浙江宁波</td></tr>
    </tbody>
2.获取文本框的内容，并把它赋值给变量fitername
var fitername = $("#fitername").val();
3.给文本框添加keyup事件
$("#filtername").keyup(function(){});
4.确认在文本框内容不为空的前提下进行内容的筛选
if( filtername != ""){
        $("table tbody tr").removeClass("selected")
                   .filter(":contains('"+filtername+"')")
                   .addClass("selected");
            }
完整代码：
Code
posted @ 2009-07-24 15:54  郭培  阅读(1184)  评论(0)  编辑  收藏  举报