JS实现隔行变色的问题

Question

var oTab = document.getElementById('tb1');               
var oTr = document.getElementsByTagName('tr');                
for(var i=0;i<oTr.length;i++){
    if(i%2==0){
oTr[i].style.backgroundColor = "#E0FFFF";
    }else{
oTr[i].style.backgroundColor = "#FF0000";
    }
}
上面是JS代码
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<table  id="tb1" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
数据是循环的，现在想实现点击第一个table里的表头项目实现下面的内容隔行变色。
现在的状况是IF都能进去，但是就是不能给画面附上颜色。郁闷，求大神

Answer 1

 <style>
    table{ border-collapse:collapse; }
    td{border:1px solid #000; padding:5px }
</style>
 
<table id="tbhead" bgcolor="#aaaaff" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<table  id="tb1" >
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr>
 <tr><td>1</td><td>2</td><td>3</td></tr></table>
<script language="javascript"> 
 
  var tbhead = document.getElementById('tbhead'); 
  var oTab = document.getElementById('tb1');                 
  var rs=  oTab.rows,cIdx ;     
  tbhead.onclick=function(evt){
   var el=window.event?event.srcElement:evt.target;
   if(el.tagName!='TD' ||  el.cellIndex==cIdx ) return;
  
   //console.info( el.cellIndex )
   cIdx=cIdx||0;
for(var i=0;i<rs.length;i++){
rs[i].cells[cIdx].style.backgroundColor = "#fff";
rs[i].cells[el.cellIndex].style.backgroundColor = i%2?'#88FFFF':'#E0FFFF';
}
cIdx=el.cellIndex;
  }
 
</script>

Answer 2

http://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css