让表格相邻行的颜色不同-白红宇

先看看效果:

如何让表格相邻行的颜色不同呢?

如何让表格的行的颜色间隔不同呢?

表格的行间隔变色

有如下种方式

方式一:使用纯css

       Css代码   
table.dictionaryList tr:nth-child(2n+3){  
    background-color:#c0e0f7;  
}  
table.dictionaryList tr:nth-child(2n+2){  
    background-color:#defcfe;  
}  

说明:n从零开始:0,1,2,3....

没有包含表格的第一行,因为第一行是标题.

方式二:使用脚本实现

       Js代码   
$(function(){  
        $('div.queryResultDiv table.productList tr:odd').addClass('odd');  
        $('div.queryResultDiv table.productList tr:even').filter(':gt(0)').addClass('even');   
    })  

说明:odd和even均是css类.

方式三:使用javascript脚本

       Js代码   
function altRows(id){  
              if(document.getElementsByTagName){  
  
                  var table = document.getElementById(id);  
                  var rows = table.getElementsByTagName("tr");  
  
                  for(i = 0; i < rows.length; i++){  
                      if(i % 2 == 0){  
                          rows[i].className = "evenrowcolor";  
                      }else{  
                          rows[i].className = "oddrowcolor";  
                      }  
                  }  
      }  
  }  

说明:参数id是表格的id属性值.

推荐方式一,使用纯css