先看看效果:
如何让表格相邻行的颜色不同呢?
如何让表格的行的颜色间隔不同呢?
表格的行间隔变色
有如下种方式
方式一:使用纯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....
没有包含表格的第一行,因为第一行是标题.
$(function(){
$('div.queryresultdiv table.productlist tr:odd').addclass('odd');
$('div.queryresultdiv table.productlist tr:even').filter(':gt(0)').addclass('even');
})
说明:odd和even均是css类.
方式三:使用javascript脚本
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