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