<img title="clip_image001" style="max-width:90%" style="max-width:90%" alt="clip_image001" src="http://files.jb51.net/upload/2009-11/20091124021521258.gif" style="max-width:90%" border="0">原理其实很简单：利用getElementsByTagName得到所有的<tr>元素，然后分别为奇数项和偶数项的</tr> <tr>元素添加背景颜色。 <br>核心代码： <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="58474" class="copybut" id="copybut58474" onclick="doCopy('code58474')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code58474"> <br><script type="text/javascript"> <BR>function color() { <BR>//把表头设为紫色 <BR>var th = document.getElementById("th"); <BR>th.style.background = "violet" <BR>//1.得到所有<tr>元素 <BR>var trs = document.getElementsByTagName("tr"); <BR>var i; <BR>for(i = 1; i <trs.length; i++) { <BR>//2.改变<tr>元素的背景颜色 <BR>if(i % 2 == 0) { <BR>trs[i].style.background = "yellow"; <BR>} else { <BR>trs[i].style.background = "olive"; <BR>} <BR>} <BR>} <BR>window.onload = color; <BR></script> <br> </div> <br>全部代码： <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="50188" class="copybut" id="copybut50188" onclick="doCopy('code50188')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code50188"> <br> <br> <br><title>双色表格</title> <br><style type="text/css"> <BR><!-- <BR>table { <BR>border:solid 1px black; <BR>text-align:center; <BR>border-spacing:0px; <BR>} <BR>th,td { <BR>border:solid 1px black; <BR>width:100px; <BR>} <BR>--> <BR></style> <br><script type="text/javascript"> <BR>function color() { <BR>//把表头设为紫色 <BR>var th = document.getElementById("th"); <BR>th.style.background = "violet" <BR>//1.得到所有<tr>元素 <BR>var trs = document.getElementsByTagName("tr"); <BR>var i; <BR>for(i = 1; i <trs.length; i++) { <BR>//2.改变<tr>元素的背景颜色 <BR>if(i % 2 == 0) { <BR>trs[i].style.background = "yellow"; <BR>} else { <BR>trs[i].style.background = "olive"; <BR>} <BR>} <BR>} <BR>window.onload = color; <BR></script> <br> <br> <br><center> <br><table> <br><tr id="th"> <br><th>姓名</th> <br><th>科目</th> <br><th>成绩</th> <br> </tr> <br><tr> <br><td>张三</td> <br><td>语文</td> <br><td>90</td> <br> </tr> <br><tr> <br><td>张三</td> <br><td>数学</td> <br><td>87</td> <br> </tr> <br><tr> <br><td>李四</td> <br><td>数学</td> <br><td>68</td> <br> </tr> <br><tr> <br><td>王五</td> <br><td>英语</td> <br><td>76</td> <br> </tr> <br> </table> <br> </center> <br> <br> <br> </div> </tr>
原理其实很简单：利用getElementsByTagName得到所有的