jQuery 表格应用:隔行变色,展开关闭,内容筛选

发布时间:2020-04-24 03:23:33 作者:frwupeng517
来源:网络 阅读:1482

应用一:表格隔行变色


1、普通的隔行变色:


需要用到的 API

$(':odd')    --> 匹配所有索引值为奇数的元素,从0开始计数

$(':even')   --> 匹配所有索引值为偶数的元素,从0开始计数


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{
            border-collapse: collapse;
        }
        th, td{
            width:100px;
            border:1px solid #ddd;
            text-align:center;
        }

        .even{background:#fff38f;}
        .odd{background:#ffe;}
        .selected{background:#ae0;}
    </style>
</head>
<body>
<div>
    筛选:<input type="text" id="#filterName">
</div>
<table>
    <thead>
    <tr>
        <th>下单时间</th>
        <th>产品名称</th>
        <th>订单金额</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>2013-04-26</td>
        <td>海尔电冰箱</td>
        <td>3688</td>
    </tr>
    <tr>
        <td>2014-11-11</td>
        <td>格力空调</td>
        <td>5689</td>
    </tr>
    <tr>
        <td>2015-01-14</td>
        <td>美的电饭煲</td>
        <td>452</td>
    </tr>
    <tr>
        <td>2016-08-26</td>
        <td>小米净化器</td>
        <td>2258</td>
    </tr>
    <tr>
        <td>2016-12-12</td>
        <td>苹果6 plus</td>
        <td>5688</td>
    </tr>
    </tbody>
</table>


<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        //隔行变色
        $('tbody>tr:odd').addClass('odd');
        $('tbody>tr:even').addClass('even');
        //某一行变为高亮显示状态
        $('tr:contains("下单")').addClass('selected')
    })
</script>
</body>
</html>


页面效果:

jQuery 表格应用:隔行变色,展开关闭,内容筛选

2、单选按钮控制表格行高亮


需要用到的API

end( )        --> 回到最近的一个“破坏性”操作之前,即,将匹配的元素列表变为前一次的状态

:checked   --> 匹配所有选中的被选中元素(复选框、单选按钮等,不包括select 中的option)

$( ':radio' )         --> 匹配所有单选按钮

:has( selector )   --> 用于筛选选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{
            border-collapse: collapse;
        }
        th, td{
            width:100px;
            border:1px solid #ddd;
            text-align:center;
        }

        .even{background:#fff38f;}
        .odd{background:#ffe;}
        .selected{background:#ae0;}
    </style>
</head>
<body>
<div>
    筛选:<input type="text" id="#filterName">
</div>
<table>
    <thead>
    <tr>
        <th></th>
        <th>下单时间</th>
        <th>产品名称</th>
        <th>订单金额</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="radio" checked></td>
        <td>2013-04-26</td>
        <td>海尔电冰箱</td>
        <td>3688</td>
    </tr>
    <tr>
        <td><input type="radio"></td>
        <td>2014-11-11</td>
        <td>格力空调</td>
        <td>5689</td>
    </tr>
    <tr>
        <td><input type="radio"></td>
        <td>2015-01-14</td>
        <td>美的电饭煲</td>
        <td>452</td>
    </tr>
    <tr>
        <td><input type="radio"></td>
        <td>2016-08-26</td>
        <td>小米净化器</td>
        <td>2258</td>
    </tr>
    <tr>
        <td><input type="radio"></td>
        <td>2016-12-12</td>
        <td>苹果6 plus</td>
        <td>5688</td>
    </tr>
    </tbody>
</table>


<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        //点击行变色
        $('tbody>tr').click(function(){
            $(this).addClass('selected').siblings('.selected').removeClass('selected').end() //切换点击变色
                    .find(':radio').attr('checked',true).end()  //点到一行的同时让对应的单选框选中
                    .siblings().find(':radio').attr('checked',false);  //其他行的单选框取消选中
        });

        //默认选中的行变色
        $('tbody>tr:has(:checked)').addClass('selected');
    })
</script>
</body>
</html>


页面效果:

jQuery 表格应用:隔行变色,展开关闭,内容筛选



3、复选框控制表格高亮


重点注意:三目运算在选择器中的用法


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{
            border-collapse: collapse;
        }
        th, td{
            width:100px;
            border:1px solid #ddd;
            text-align:center;
        }

        .even{background:#fff38f;}
        .odd{background:#ffe;}
        .selected{background:#ae0;}
    </style>
</head>
<body>
<div>
    筛选:<input type="text" id="#filterName">
</div>
<table>
    <thead>
    <tr>
        <th></th>
        <th>下单时间</th>
        <th>产品名称</th>
        <th>订单金额</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox" checked></td>
        <td>2013-04-26</td>
        <td>海尔电冰箱</td>
        <td>3688</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2014-11-11</td>
        <td>格力空调</td>
        <td>5689</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2015-01-14</td>
        <td>美的电饭煲</td>
        <td>452</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2016-08-26</td>
        <td>小米净化器</td>
        <td>2258</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>2016-12-12</td>
        <td>苹果6 plus</td>
        <td>5688</td>
    </tr>
    </tbody>
</table>


<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        //点击行变色
        $('tbody>tr').click(function(){
            //判断当前是否选中 -> boolean
            var hasSelected = $(this).hasClass('selected');
            //如果选中,则移除 selected 类,否则就加上 selected。使用三目运算
            $(this)[hasSelected?'removeClass':'addClass']('selected')
                    //查找当前行内的 checkbox 属性,选中则去掉,未勾选则选中
                    .find(':checked').attr('checked',!hasSelected);
        });

        //默认选中的行变色
        $('tbody>tr:has(:checked)').addClass('selected');

    })
</script>
</body>
</html>


效果:

jQuery 表格应用:隔行变色,展开关闭,内容筛选



应用二:表格展开/关闭


需要用到的API

toggleClass( )       --> 如果存在,就删除一个类;如果不存在,就添加一个类


toggle([speed],[easing],[fn])   --> 如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{
            border-collapse: collapse;
        }
        th, td{
            width:100px;
            border:1px solid #ddd;
            text-align:center;
        }

        .even{background:#fff38f;}
        .odd{background:#ffe;}
        .selected{background:#ae0;}
    </style>
</head>
<body>
<div>
    筛选:<input type="text" id="#filterName">
</div>
<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>2013-04-26</td>
        <td>海尔电冰箱</td>
        <td>3688</td>
    </tr>
    <tr class="child_row_01">
        <td>2014-11-11</td>
        <td>格力空调</td>
        <td>5689</td>
    </tr>
    <tr class="child_row_01">
        <td>2015-01-14</td>
        <td>美的电饭煲</td>
        <td>452</td>
    </tr>
    <tr class="parent" id="row_02"><td colspan="3">小家电系列</td></tr>
    <tr class="child_row_02">
        <td>2016-08-26</td>
        <td>小米净化器</td>
        <td>2258</td>
    </tr>
    <tr class="child_row_02">
        <td>2016-06-26</td>
        <td>九阳豆浆机</td>
        <td>258</td>
    </tr>
    <tr class="parent" id="row_03"><td colspan="3">手机系列</td></tr>
    <tr class="child_row_03">
        <td>2016-12-12</td>
        <td>苹果6 plus</td>
        <td>5688</td>
    </tr>
    <tr class="child_row_03">
        <td>2016-12-30</td>
        <td>苹果7 plus</td>
        <td>7688</td>
    </tr>
    </tbody>
</table>


<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        $('tr.parent').click(function(){  //获取父行
            $(this).toggleClass('selected')  //添加/删除高亮
                    .siblings('.child_'+this.id).toggle();  //显示/隐藏子行
        })

    })
</script>
</body>
</html>


效果:

jQuery 表格应用:隔行变色,展开关闭,内容筛选



应用三:表格内容筛选


需要用到的API

:contains( text )       --> 匹配包含给定文本的元素

$.trim(str)                 --> 去掉字符串起始和结尾的空格

filter(expr|obj|ele|fn)    --> 筛选出与指定表达式匹配的元素集合

show([speed,[easing],[fn]])    --> 显示隐藏的匹配元素,无论这个元素是通过 hide( ) 方法隐藏的还是在 CSS里设置了 display: none, 这个方法都有效

hide([speed,[easing],[fn]])     --> 隐藏显示的匹配元素

keyup([[data],fn])     --> 当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table{
            border-collapse: collapse;
        }
        th, td{
            width:100px;
            border:1px solid #ddd;
            text-align:center;
        }
    </style>
</head>
<body>
<div>
    筛选:<input type="text" id="filterName">
</div>
<table>
    <thead>
    <tr>
        <th>下单时间</th>
        <th>产品名称</th>
        <th>订单金额</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>2013-04-26</td>
        <td>海尔电冰箱</td>
        <td>3688</td>
    </tr>
    <tr>
        <td>2014-11-11</td>
        <td>格力空调</td>
        <td>5689</td>
    </tr>
    <tr>
        <td>2015-01-14</td>
        <td>美的电饭煲</td>
        <td>452</td>
    </tr>
    <tr>
        <td>2016-08-26</td>
        <td>小米净化器</td>
        <td>2258</td>
    </tr>
    <tr>
        <td>2016-12-12</td>
        <td>苹果6 plus</td>
        <td>5688</td>
    </tr>
    </tbody>
</table>


<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $("#filterName").keyup(function(){
        $("table tbody tr")
                .hide()
                .filter(":contains('"+( $(this).val().trim() )+"')") //注意contains内部的空格和字符串的拼接
                .show();
    }).keyup();
</script>
</body>
</html>


效果:

jQuery 表格应用:隔行变色,展开关闭,内容筛选


推荐阅读:
  1. jQuery插件--表格隔行变色
  2. jQuery介绍

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

jquery ue

上一篇:隐式游标返回结果

下一篇:Kubernetes安全三步谈:三种方法保护Kubernetes免受内部威胁

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》