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();

完整代码：

>

二.根据文本框中输入的内容筛选表格行
最终效果是：与文本框中输入的内容相匹配的表格行高亮显示。
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");
            }

完整代码：

>