如果表格的数据比较多的话，表格颜色很单一看起来很不方便，看到一些网站将每行的颜色隔行改掉，很清晰。
其次如果表格的每行信息很多的话，一个不小心会看跑偏，所以在此为大家提供一个解决的办法，但鼠标放上去时，该行的颜色会变成独一无二的背景颜色。
这两种效果都是改变tr的className从而达到改变tr属性的效果。
效果图如下（选中的那行就是鼠标放上去的那行，由于截图较为垃圾，所以没有截到鼠标）：
代码：：：
<!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>js实现表格隔行变色效果</title><style> .top{ background-color:#F93; color:#30C;} table{ border:1px #000 dashed; border-collapse:collapse; /*border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 值 描述 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 inherit 规定应该从父元素继承 border-collapse 属性的值。 */ } td,th{ border:#000 1px solid; text-align:center;} .one{ background-color:#066; } .two{ background-color:#9F9; } .over{ background-color:#6CF;} </style> <script language="javascript"> function geHang(){ //获取所有的tr var trlist=document.getElementsByTagName("tr"); //判断从第二个tr起到倒数第二个tr的tr标签，因为获取tr的对象数组是从下标是从0开始的所以第二就是下表为1的tr标签倒数第二tr也就是trlist.length-1. for(var i=1;i<trlist.length-1;i++){ //对对象的下标i判断，是偶数用className为one，else则为two，one和two是两种不同的属性 if(i%2==0){ trlist[i].className="one"; }else{ trlist[i].className="two"; } //此处是鼠标放上去和移开是的一个效果，也是通过改变tr的className实现的 //先将鼠标一上去的那个tr的本身的颜色保存下来，以便移走后改回来原来颜色用 var oldcolor; //给每个tr加上onmouseover事件（鼠标放上去触发） trlist[i].οnmοuseοver=function(){ //当鼠标放上去是先将本身的class属性给了oldcolr。 oldcolor=this.className; //然后将自己的className改为over，引用over的属性，this指的是鼠标放上去的那个tr对象。 this.className="over"; } //给每个tr加上onmouseout事件（鼠标离开时触发） trlist[i].οnmοuseοut=function(){ //当鼠标离开时将原来的className改回来，继续用原来的className属性 this.className=oldcolor; } } } </script> </head> <body οnlοad="geHang()"> <table width="621" border="1" align="center"> <tr class="top"> <th width="105"><A href="javascript:selectAll('qx')" type=all>全选</A></th> <th width="111">发件人</th> <th width="128">邮件名称</th> <th width="249">邮件附属信心</th> </tr> <tr> <td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td><input type="checkbox" name="idlist[]" value="<{$products[record].id}>"></td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr class="top"> <td><A href="javascript:selectAll('qx')" type=all>全选</A></td> <td colspan="3"> <A href="javascript:selectAll('qx')" type=all>全选</A> - <A href="javascript:selectAll('fx')" type=reverse>反选</A> - <A href="javascript:selectAll('qbx')" type=no>全不选</A> - <INPUT class="Btn BtnNml" hideFocus type=button value="删除所选附件" outClass="Btn BtnNml ImpBtn" overClass="Btn BtnHv ImpBtn" action="move" onClick="del('./delGoods.php');" /> </td> </tr> </table><!--全选反选和全不选就是传过去一个type值，根据type的值将idlist[]复选框的状态改掉就可以了--> <script language="javascript"> function selectAll(type) { var arrObj=document.getElementsByName("idlist[]"); if(type=="qx"){ for(var i=0; i<arrObj.length; i++){ arrObj[i].checked=true; } } else if(type=="qbx"){ for(var i=0; i<arrObj.length; i++){ arrObj[i].checked=false; } } else if(type=="fx"){ for(var i=0; i<arrObj.length; i++){ if(arrObj[i].checked==false){ arrObj[i].checked=true; } else{ arrObj[i].checked=false; } } } } </script> </body> </html>