- Another mouse hover table cell, table color instance effect, the use of CSS and JS technology combination, because of some compatibility is very good, and easy to control, code modification is convenient, with the table read Dynamic Data does not have any relationship, more convenient.
<title> mouse hover cell color </title>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<style type= "Text/css" >
<!--
#myTable {
Width:100%;border-collapse:collapse;margin:1em 0;
}
#myTable th,td{
text-align:left;padding:.5em;border:1px solid #fff;
}
th{
Background-color: #328aa4; color: #fff;
}
Td{background: #e5f1f4;}
Tr.even td{background: #e5f1f4;}
Tr.odd td{background: #f8fbfc;}
Tr.over td{background: #bce774;}
Tr.out td{}
-
</style>
<body onload= "CHANGETABLEBG (); >
<table width= "id=" myTable "cellspacing=" 0 "cellpadding=" 0 ">
<tr>
<th>title</th>
<th>title</th>
<th>title</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
<script type= "Text/javascript" >
<!--
function Changetablebg ()
{
var Changetr=document.getelementbyid ("MyTable"). getElementsByTagName ("tr");
for (i=0;i<changetr.length;i++)
{
Changetr[i].classname= (i%2>0)? " Even ":" Odd ";
Changetr[i].temp=changetr[i].classname;
Changetr[i].onmouseover=function () {
This.classname= ' over ';
}
Changetr[i].onmouseout=function () {
This.classname=this.temp;
}
}
}
-
</script>
</body>