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

最新推荐文章于 2022-08-01 09:49:50 发布

weixin_30721077

最新推荐文章于 2022-08-01 09:49:50 发布

阅读量141

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/guopei/articles/1530270.html

版权

表格内容筛选需要用到两个选择器：
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 = " 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 >

2.所表格除thead内容外全部隐藏

$( " table tbody tr " ).hide();

3.将表格行中有“王”字的表格行显示

$( " table tbody tr " ).filter( " :contains('王') " ).show();

完整代码：

Code
<!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" />
<title>表格内容筛选</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        $('tbody>tr:even').addClass("even");
        $('tbody>tr:odd').addClass("odd");
        $('table tbody tr').hide().filter(':contains("王")').show();
    })
</script>
<style type="text/css">
    table{ border:0;border-collapse:collapse;}
    td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
    th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;}
    .even{ background:#FFF38F;}  /* 偶数行样式*/
    .odd{ background:#FFFFEE;}  /* 奇数行样式*/
    .parent{ background:#ccc; cursor:pointer;}
    .selected{ background:#FF6500;color:#fff;}
</style>
</head>
<body>
<table>
    <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>
</table>
</body>
</html>

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

</ 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
<!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" />
<title>表格内容筛选</title>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
    $(function(){
        $('tbody>tr:even').addClass("even");
        $('tbody>tr:odd').addClass("odd");
        $("#filtername").keyup(function(){
            var filtername = $(this).val();
            if( filtername != ""){
            $("table tbody tr").removeClass("selected")
                               .filter(":contains('"+filtername+"')")
                               .addClass("selected");
            }
        })
    })
</script>
<style type="text/css">
    table{ border:0;border-collapse:collapse;}
    td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
    th{ font:bold 12px/17px Arial;text-align:left;padding:4px;border-bottom:1px solid #333;width:100px;}
    .even{ background:#FFF38F;}  /* 偶数行样式*/
    .odd{ background:#FFFFEE;}  /* 奇数行样式*/
    .parent{ background:#ccc; cursor:pointer;}
    .selected{ background:#FF6500;color:#fff;}
</style>
</head>
<body>
<table>
    <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>
</table>
</body>
</html>

转载于:https://www.cnblogs.com/guopei/articles/1530270.html