[Javascript]
Copy codeThe Code is as follows:
$ (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]
Copy codeThe Code is as follows:
<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]
Copy codeThe Code is as follows:
. 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 ;}