鼠标经过表格变色

工作学习中经常会用到的代码，很实用

既可以实现隔行换色，又可以实现鼠标经过换色，鼠标移开换为原色

注：如果点击“运行代码”后没有隔行换色效果，刷新页面后可以看到效果，有点小郁闷~~~~~

应用的时候绝对没问题。

<script> function Run() { var str = document.all.stefli.value; var re = /(/[STEFLICODE])(.[^/[]+)(/[//STEFLICODE])/i; var html = str.replace(re,"$2"); var obj = window.open("","_blank",""); obj.document.writeln(html); } </script>

<style type="text/css" media="screen">
table {border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {border:solid #999;border-width:0 1px 1px 0;}
.t1 {background-color:#fff;}/* 单行的背景色 */
.t2 {background-color:#eee;}/* 双行的背景色 */
.t3 {background-color:#ccc;}/* 鼠标经过时的背景色 */
</style>
<table width=400 align=center>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>
<script type="text/javascript">
var Ptr=document.getElementsByTagName("tr");
function recolor() {
for (i=1;i<Ptr.length+1;i++) {
Ptr[i-1].className = (i%2>0)?"t1":"t2";
}
}
window.οnlοad=recolor;
for(var i=0;i<Ptr.length;i++) {
Ptr[i].οnmοuseοver=function(){
this.tmpClass=this.className;
this.className = "t3";
};
Ptr[i].οnmοuseοut=function(){
this.className=this.tmpClass;
};
}
</script>

 

< style  type ="text/css"  media ="screen" > ...
table {...}{border-collapse:collapse;border:solid #999;border-width:1px 0 0 1px;}
table td {...}{border:solid #999;border-width:0 1px 1px 0;}
.t1 {...}{background-color:#fff;}/**//* 单行的背景色 */
.t2 {...}{background-color:#eee;}/**//* 双行的背景色 */
.t3 {...}{background-color:#ccc;}/**//* 鼠标经过时的背景色 */
</ style >
< table  width =400  align =center >
< tr >< td > 1 </ td >< td > 2 </ td ></ tr >
< tr >< td > 1 </ td >< td > 2 </ td ></ tr >
< tr >< td > 1 </ td >< td > 2 </ td ></ tr >
</ table >
< script  type ="text/javascript" > ...
var Ptr=document.getElementsByTagName("tr");
function recolor() ...{
for (i=1;i<Ptr.length+1;i++) ...{
Ptr[i-1].className = (i%2>0)?"t1":"t2";
}
}
window.onload=recolor;
for(var i=0;i<Ptr.length;i++) ...{
Ptr[i].onmouseover=function()...{
this.tmpClass=this.className;
this.className = "t3";
};
Ptr[i].onmouseout=function()...{
this.className=this.tmpClass;
};
}
</ script >