表格隔行交替顯色

一、表格隔行交替顯色

<mce:script type="text/javascript"><!-- function showtable(){ var tableid='colorf'; //表格的id var overcolor='#FCF9D8'; //鼠標經過顏色 var color1='#FFFFFF'; //第一種顏色 var color2='#FCF9D8'; //第二種顏色 var tablename=document.getElementById(tableid) var tr=tablename.getElementsByTagName("tr") alert(tr.length); for(var i=1 ;i<tr.length;i++){ if(tr[i].rowIndex%2==0){ tr[i].style.backgroundColor=color1; }else{ tr[i].style.backgroundColor=color2; } } } // --></mce:script>

 

二、鼠標經過變色+隔行交替顯色

<mce:style language="text/css"><!-- /*第一種顏色*/ #table tr.color1{ background-color:#FFFFFF; } /*第二種顏色*/ #table tr.color2{ background-color:#F8F8F8; } --></mce:style><style language="text/css" mce_bogus="1">/*第一種顏色*/ #table tr.color1{ background-color:#FFFFFF; } /*第二種顏色*/ #table tr.color2{ background-color:#F8F8F8; }</style> <mce:script type="text/javascript"><!-- function onloadEvent(func){ var one=window.onload if(typeof window.onload!='function'){ window.οnlοad=func } else{ window.οnlοad=function(){ one(); func(); } } } function showtable(){ var tableid='table'; //表格的id var overcolor='#FCF9D8'; //鼠標經過顏色 var color1='#FFFFFF'; //第一種顏色 var color2='#F8F8F8'; //第二種顏色 var tablename=document.getElementById(tableid) var tr=tablename.getElementsByTagName("tr") for(var i=1 ;i<tr.length;i++){ tr[i].οnmοuseοver=function(){ this.style.backgroundColor=overcolor; } tr[i].οnmοuseοut=function(){ if(this.rowIndex%2==0){ this.style.backgroundColor=color1; }else{ this.style.backgroundColor=color2; } } if(i%2==0){ tr[i].className="color1"; }else{ tr[i].className="color2"; } } } onloadEvent(showtable); // --></mce:script>