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

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

　　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>

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