Jquery Implementation table Color alternating change, click on the selected row, mouse over the color change effect diagram as follows:
Source code (DEMO) package download
The HTML code is as follows:
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<script type= "Text/javascript" src= "Http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js" >< /script>
<script type= "Text/javascript" src= "Table-row-1.0.js" ></script>
<style type= "Text/css" >
. table-tr-title{
height:26px;
font-size:12px;
Text-align:center;
}
. table-tr-content{
height:18px;
Background: #FFFFFF;
Text-align:center;
font-size:12px;
}
. normaleventd{
Background: #DFD8D8;
}
. normaloddtd{
Background: #FFFFFF;
}
. hovertd{
Background-color: #eafcd5;
height:18px;
Text-align:center;
font-size:12px;
}
. trselected{
Background-color: #51b2f6;
height:18px;
Text-align:center;
font-size:12px;
}
</style>
<body>
<table width= "99%" class= "list" style= "Word-break:break-all" border= "0"
align= "center" cellpadding= "0" cellspacing= "1" bgcolor= "#c0de98" >
<tr class= "Table-tr-title" >
<TD width= "5%" > title </td>
<TD width= "5%" > title </td>
<TD width= "5%" > title </td>
<TD width= "5%" > title </td>
</tr>
<tr class= "Table-tr-content" >
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
<TD width= "5%" > Data </td>
</tr>
</body>
Table-row-1.0.js
Copy Code code as follows:
$ (document). Ready (function () {
DataGrid selection of line discoloration and mouse through row discoloration///////////////
var dtselector = ". List";
var tblist = $ (dtselector);
Tblist.each (function () {
var self = this;
$ ("Tr:even:not (: A)", $ (self)). AddClass ("Normaleventd"); Odd line from the next line in the header line, number of rows: (1,3,5 ... )
$ ("Tr:odd", $ (self)). AddClass ("Normaloddtd"); Even rows starting at the next line in the header line, number of rows: (2,4,6 ... )
The line discoloration of the mouse pass
$ ("Tr:not (: A)", $ (self)). Hover (
Function () {$ (this). addclass (' HOVERTD '); $ (this). Removeclass (' table-td-content ');
Function () {$ (this). Removeclass (' HOVERTD '); $ (this). addclass (' table-td-content ');}
);
Select row discoloration
$ ("tr", $ (self)). Click (function () {
var trthis = this;
$ (self). Find (". trselected"). Removeclass (' trselected ');
if ($ (trthis). Get (0) = = $ ("Tr:first", $ (self)). Get (0)) {
Return
}
$ (trthis). addclass (' trselected ');
});
});
});