Jquery implementation list (line by line color, select all, move the mouse over the current line) effect example _ jquery

Jquery implementation list (line by line color, select all, move the mouse over the current line). For more information, see [javascript].

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

The Code is as follows:

Lt; HeaderTemplate>

Lt;/HeaderTemplate>

[Css]

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