• 技术文章 >web前端 >js教程

    Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例_jquery

    2016-05-16 17:32:24原创581
    [javascript]
    复制代码 代码如下:

    $(function () {
    gridview("GridView1");
    });

    //gridview
    function gridview(objgridview) {
    //get obj id
    var gridviewId = "#" + objgridview;
    //even
    $(gridviewId + ">tbody tr:even").addClass("NormalColor");
    //first
    $(gridviewId + ">tbody tr:first").removeClass("NormalColor").addClass("HeadColor");
    //odd
    $(gridviewId + ">tbody tr:odd").addClass("AlterColor");
    //move and click
    $(gridviewId + ">tbody tr").slice(1).hover(function () {
    $(this).addClass("HoverColor");
    }, function () {
    $(this).removeClass("HoverColor");
    });
    //all check
    $("#chkAll").click(function () {
    $(gridviewId + '>tbody >tr >td >input:checkbox').attr('checked', this.checked);
    });
    //check status
    $(gridviewId + ' >tbody >tr >td >input:checkbox').click(function () {
    var expr1 = gridviewId + ' >tbody >tr >td >input:checkbox:checked';
    var expr2 = gridviewId + ' >tbody >tr >td >input:checkbox';
    var selectAll = $(expr1).length == $(expr2).length;
    $('#chkAll').attr('checked', selectAll);
    });
    }

    [html]
    复制代码 代码如下:




    lt;HeaderTemplate>

    lt;/HeaderTemplate>






    [css]
    复制代码 代码如下:

    .HeadColor{background-color: #E0ECFF; color:#333;line-height:25px;}
    .AlterColor{background-color: #edf1f8; line-height:20px;}
    .NormalColor{background-color: #f7f6f3; line-height:20px;}
    .HoverColor{background: #89A5D1; line-height:20px;}
    .SelectColor{background-color: #ACBFDF; line-height:20px;}
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:JavaScript实现网页上的浮动广告的简单方法_javascript技巧 下一篇:利用ajaxfileupload插件实现文件上传无刷新的具体方法_javascript技巧
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 推荐11个受欢迎的Node.js 框架,快放入收藏夹吧!• 一起聊聊JavaScript函数的定义与基本使用• 详解如何使用Node.js开发一个简单图片爬取功能• JavaScript DOM API知识串讲• JavaScript中的数组知识点总结
    1/1

    PHP中文网