<script> window.onload=stripeTable; function stripeTable(){ var tables=document.getElementsByTagName(‘table‘); for(var i=0;i<tables.length;i++){ var rows=tables[i].getElementsByTagName(‘tr‘); for(var j=0;j<rows.length;j++){ if(j%2==0){ rows[j].className=‘even‘; }else{ rows[j].className=‘odd‘; } } } } </script>
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Cities</title> <style type="text/css"> table{ border:1px solid #000;} th{ background-color:#CCC;} tr,td{ width:10em; padding:.5em;} .even{ background-color:#CCC;} .odd{ background-color:#ffc;} </style> </head> <body> <table> <caption>Itinerary</caption> <thead> <tr><th>When</th><th>Where</th></tr> </thead> <tbody> <tr><td>June 9th</td><td>Portland,<abbr title=‘Oregon‘>OR</abbr></td></tr> <tr><td>June 10th</td><td>Seattle,<abbr title=‘Washington‘>WA</abbr></td></tr> <tr><td>June 12th</td><td>Sacrmento,<abbr title=‘California‘>CA</abbr></td></tr> </tbody> </table> <script> window.onload=stripeTable; function stripeTable(){ var tables=document.getElementsByTagName(‘table‘); var odd; for(var i=0;i<tables.length;i++){
odd = false; var rows=tables[i].getElementsByTagName(‘tr‘); for(var j=0;j<rows.length;j++){ if(odd == true){ rows[j].className=‘even‘; odd = false; }else{ rows[j].className=‘odd‘; odd = true; } } } } </script> </body> </html>
【DOM编程艺术】表格隔行换色stripeTables,布布扣,bubuko.com
原文：http://www.cnblogs.com/positive/p/3678739.html