Use jquery to achieve table interlacing and highlighting when moving forward
On the source
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=iso-8859-1 ">
<title> table interlaced background and highlight current line </title>
<script type= "Text/javascript" src= "Jquery-1.4.2.min.js" ></script>
<style type= "Text/css" >
body{margin:0 Auto; font-size:12px;}
. data_list td{width:100px;}
</style>
<script type= "Text/javascript" >
/* When the mouse moves to the table, the current row background color */
$ (document). Ready (function () {
$ (". Data_list tr TD"). MouseOver (function () {
$ (this). The parent (). Find ("TD"). CSS ("Background-color", "#d5f4fe");
});
})
/* When the mouse moves on the table, the left row background resumes */
$ (document). Ready (function () {
$ (". Data_list tr TD"). Mouseout (function () {
var BGC = $ (This). Parent (). attr ("BG");
$ (this). The parent (). Find ("TD"). CSS ("Background-color", BGC);
});
})
$ (document). Ready (function () {
var color= "#ffeab3"
$ (". Data_list tr:odd TD"). CSS ("Background-color", color); Change even row background color
/* Save the background color to the attribute */
$ (". Data_list tr:odd"). attr ("bg", color);
$ (". Data_list tr:even"). attr ("BG", "#fff");
})
</script>
<body>
<table class= "Data_list" >
<tr><td> </td> <td> </td><td> </td><td> + </td>< Td> </td></tr>
<tr><td> </td> <td> </td><td> </td><td> + </td>< Td> </td></tr>
<tr><td> </td> <td> </td><td> </td><td> + </td>< Td> </td></tr>
<tr><td> </td> <td> </td><td> </td><td> + </td>< Td> </td></tr>
<tr><td> </td> <td> </td><td> </td><td> + </td>< Td> </td></tr>
<tr><td> </td> <td> </td><td> </td><td> + </td>< Td> </td></tr>
<tr><td> </td> <td> </td><td> </td><td> + </td>< Td> </td></tr>
<tr><td> </td> <td> </td><td> </td><td> + </td>< Td> </td></tr>
</table>
</body>
Use jquery to achieve table interlacing and highlighting when moving forward