This article mainly introduces the jquery table Select Line Color Implementation code, the need for friends can refer to the following
jquery table Select row Color (better) code as follows: <html> <head> <style type= "Text/css" > . table-tr-title{ height:26px; font-size:12px; text-align:center; } . table-tr-content{& nbsp height:18px; background: #FFFFFF; text-align:center; font-size:12px; } . normalEvenTD{& nbsp Background: #DFD8D8; } .normaloddtd{ background: #FFFFFF; } Background-color: #eafcd5; height:18px; text-align:center; font-size:12px; } . trselected{ background-color: #51b2f6; height:18px; text-align:center; font-size:12px; } </style> </head> <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>&NBSp <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> </html> JS code: code as follows: <script type= "text/ JavaScript "src=" Jquery-1.6.4.js ></script> <script> $ (function () { ///////datagrid selected line discoloration and mouse after 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 ... //mouse over the line discoloration $ ("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 (". tr Selected "). Removeclass (' trselected '); if ($ (trthis). Get (0) = = $ (" Tr:first ", $ (self)). Get (0)) { return; } $ (trthis). addclass (' trselected '); }); }); }); </script> Effect Display: