提示：您可以先修改部分代碼再運行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>實用的表格隔行換色效果</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><!--把下面代碼加到<head>與</head>之間--><script type="text/javascript">window.onload=function(){//頁面所有元素載入完畢var item=document.getElementById("tb");//擷取id為tb的元素(table)var tbody=item.getElementsByTagName("tbody")[0];//擷取表格的第一個tbody元素var trs=tbody.getElementsByTagName("tr");//擷取tbody元素下的所有tr元素for(var i=0;i<trs.length;i++){//迴圈tr元素trs[i].onmouseover=function(){this.style.backgroundColor='#ff0000'}if(i%2==0){//模數（取餘數，比如0%2=0、1%2=1、2%2=0、3%2=1）trs[i].style.backgroundColor="#ccc";//改變“合格tr元素”的背景色trs[i].onmouseout=function(){this.style.backgroundColor="#ccc";} }else{trs[i].style.backgroundColor="#fff";//改變“合格tr元素”的背景色trs[i].onmouseout=function(){this.style.backgroundColor="#fff";}}}}</script></head><body><!--把下面代碼加到<body>與</body>之間--><table id="tb" border="0" cellspacing="0"><tbody><tr><td>第一行</td><td>第一行</td></tr><tr><td>第二行</td><td>第二行</td></tr><tr><td>第三行</td><td>第三行</td></tr><tr><td>第四行</td><td>第四行</td></tr><tr><td>第五行</td><td>第五行</td></tr><tr><td>第六行</td><td>第六行</td></tr></tbody></table></body></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
