jquery table alternating color, mouse over color

CSS code:

th{Height:30px;Line-height:20px;background:#0093D9;Color:#fff;}TD{padding:6px 10px;Border-bottom:1px solid #95bce2;text-align:Center;vertical-align:Top;}Tr.alt TD{background:#ecf6fc;}Tr.over TD{background:#bcd4ec;}

HTML code:

<Tableclass= "Table"width= "50%"Border= "0"cellpadding= "0"cellspacing= "0">        <thead>            <TR>                <th>Name</th>                <th>Age</th>                <th>Qq</th>                <th>Email</th>            </TR>        </thead>        <tbody>            <TR>                <TD>Tom</TD>                <TD>25</TD>                <TD>123456789</TD>                <TD>[Email protected]</TD>            </TR>            <TR>                <TD>Tom</TD>                <TD>25</TD>                <TD>123456789</TD>                <TD>[Email protected]</TD>            </TR>            <TR>                <TD>Tom</TD>                <TD>25</TD>                <TD>123456789</TD>                <TD>[Email protected]</TD>            </TR>            <TR>                <TD>Tom</TD>                <TD>25</TD>                <TD>123456789</TD>                <TD>[Email protected]</TD>            </TR>            <TR>                <TD>Tom</TD>                <TD>25</TD>                <TD>123456789</TD>                <TD>[Email protected]</TD>            </TR>        </tbody>    </Table>

JS Code:

$ (function () {        $ ('. Table tr '). Hover (function () {            $ (this). addclass (' over '),        },function () {            $ (this). Removeclass (' over ');            $ ('. Table Tr:even '). addclass (' Alt ');    Even row color        );    });

Implementation principle: Through the hover method, there are two functions, move in, move out, move in, add class highlighting, remove the class. Interlaced color mainly through tr:even even line discoloration, tr:odd odd line color.

jquery table alternating color, mouse over color