您的位置：首页 > Web前端 > JQuery

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

2018-10-12 14:02 801 查看

[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]


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

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航