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

  • 相关阅读:
    vmware-tools安装
    UBUNTU 安装教程
    CANO入门(三)
    CANOE入门(二)
    CANOE入门(一)
    ubuntu 常见错误--Could not get lock /var/lib/dpkg/lock
    vmware-tools安装
    root权限
    ARM嵌入式开发中的GCC内联汇编__asm__
    OpenCV3.1.0+VS2015开发环境配置
  • 原文地址:https://www.cnblogs.com/smartsmile/p/6234441.html
Copyright © 2011-2022 走看看