JS table interlaced color change and hover effect

<!--JS Effect--

<script src= "Js/jquery.min.js" language= "JavaScript" ></script>

<script>

$ (document). Ready (function () {
The DataGrid selected row color and the mouse after the line color///////////////
var dtselector = ". List";
var tblist = $ (dtselector);

Tblist.each (function () {
var = this;
$ ("Tr:even:not (: First)", $ (self)). AddClass ("Normaleventd"); Odd line starting from the next line in the header row, number of lines: (1,3,5 ... ）
$ ("Tr:odd", $ (self)). AddClass ("Normaloddtd"); Even rows starting from the next line of the header row, number of lines: (2,4,6 ... ）

Color of the line passed by the mouse
$ ("Tr:not (: First)", $ (self)). Hover (
Function () {$ (this). addclass (' HOVERTD '); $ (this). Removeclass (' table-td-content ');},
Function () {$ (this). Removeclass (' HOVERTD '), $ (this). addclass (' table-td-content ');}
);

Select Line Color
$ ("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 ');
});
});
});

</script>

<!--form code--

<table width= "100%" class= "list" style= "Word-break:break-all" border= "0"
align= "center" cellpadding= "0" cellspacing= "1" bgcolor= "#e4e5e5" >
<tr class= "Table-tr-title" >
&LT;TD width= "5%" > Name </td>
&LT;TD width= "5%" > Authorization level </td>
&LT;TD width= "5%" > Dealer mobile phone number </td>
</tr>
<tr class= "Table-tr-content" >
&LT;TD width= "5%" > Talk about heavy sea </td>
&LT;TD width= "5%" > Level agent </td>
&LT;TD width= "5%" >156230152416</td>
</tr>
<tr class= "Table-tr-content" >
&LT;TD width= "5%" > Data </td>
&LT;TD width= "5%" > Data </td>
&LT;TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
&LT;TD width= "5%" > Data </td>
&LT;TD width= "5%" > Data </td>
&LT;TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
&LT;TD width= "5%" > Data </td>
&LT;TD width= "5%" > Data </td>
&LT;TD width= "5%" > Data </td>
</tr>
<tr class= "Table-tr-content" >
&LT;TD width= "5%" > Data </td>
&LT;TD width= "5%" > Data </td>
&LT;TD width= "5%" > Data </td>
</tr>
</table>

<!--CSS style sheet--

. table-tr-title{Font-weight:bold;
height:26px;
font-size:16px; Font-family: "Microsoft Jas Black"; line-height:36px;
Text-align:center;
}
. table-tr-content{line-height:32px; font-size:14px; font-family: "Microsoft Jas Black";
height:18px; Color: #676767;
Background: #FFFFFF;
Text-align:center;
font-size:12px;
}
. normaleventd{
Background: #e9e8e8;
}
. normaloddtd{
Background: #FFFFFF;
}
. hovertd{
Background-color: #d2d0d0;
height:18px;
Text-align:center;
font-size:12px;
}
. trselected{
Background-color: #51b2f6;
height:18px;
Text-align:center;
font-size:12px;
}

JS table interlaced color change and hover effect