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