zoukankan      html  css  js  c++  java
  • 利用Jquery实现GridView隔行换色,全选,鼠标滑过当前行效果

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


           <asp:GridView ID="GridView1" runat="server" ClientIDMode="Static" Width="100%" CssClass="gvCss">
                <Columns>
    	         <asp:TemplateField> 
    				<HeaderTemplate>
    					<input type="checkbox" id="chkAll" name="chkAll"  />
    				</HeaderTemplate>			 
    	            <ItemTemplate>
    	                <input type="checkbox" id="chkItem"  name="chkItem" value='<%# Eval("ID") %>' />
    	            </ItemTemplate>
    	         </asp:TemplateField>
            </asp:GridView>



    .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;}

  • 相关阅读:
    ping 网关不同的原因(51cto博客搬迁)
    Linux Shell常用命令总结(51cto 博客搬迁)
    学生管理系统管理系统
    offset属性在各版本浏览器中的不同算法
    常用正则表达式
    select城市3级联动
    html5表单验证消息框
    清除浏览器默认选择效果
    排序之简单的冒泡排序
    简单的桶排序
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234441.html
Copyright © 2011-2022 走看看