<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">The principle is actually very simple: use getElementsByTagName to get all <tr> elements, and then add background colors to the <tr> elements of odd and even items respectively. <br>Core code: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="58474" class="copybut" id="copybut58474" onclick="doCopy('code58474')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code58474"> <br><script type=" text/javascript" > <br>function color() { <br>//Set the header to purple<br>var th = document.getElementById("th"); <br>th.style.background = " violet" <br>//1. Get all <tr> elements <br>var trs = document.getElementsByTagName("tr"); <br>var i; <br>for(i = 1; i <trs .length; i ) { <br>//2. Change the background color of the <tr> element <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>All codes: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="50188" class="copybut" id="copybut50188" onclick="doCopy('code50188')"><u>Copy code</u></a></span> The code is as follows: </div> <div class="codebody" id="code50188"> <br><html> <br><head> <br><title>Two-color table</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>//Set the header to purple<br>var th = document.getElementById("th"); <br>th.style.background = "violet" <br>//1. Get all< tr>Element<br>var trs = document.getElementsByTagName("tr"); <br>var i; <br>for(i = 1; i <trs.length; i ) { <br>//2. Change the background color of the <tr> element <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></head> <br> <body> <br><center> <br><table> <br><tr id="th"> <br><th>name</th> <br><th> ;Subject</th> <br><th>Achievements</th> <br></tr> <br><tr> <br><td>Zhang San</td> <br><td>中文</td> <br><td>90</td> <br></tr> /td> <br><td>Mathematics</td> <br><td>87</td> <br></tr> <br><tr> Li Si</td> <br><td>Mathematics</td> <br><td>68</td> <br></tr> <br><tr> <br> <td>王五</td> <br><td>English</td> <br><td>76</td> <br></tr> <br></ table> <br></center> <br></body> <br></html> <br><br> </div>
The principle is actually very simple: use getElementsByTagName to get all 
