让表格相邻行的颜色不同

最新推荐文章于 2024-07-12 18:29:20 发布

最新推荐文章于 2024-07-12 18:29:20 发布 · 1.4k 阅读

文章标签：

#间隔变色 #tr间隔变色 #间隔换色 #相邻色不同 #table tr

javascript 同时被 2 个专栏收录

140 篇文章

订阅专栏

css

23 篇文章

订阅专栏

先看看效果:

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

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

表格的行间隔变色

有如下种方式

方式一:使用纯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....

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

方式二:使用javascript脚本实现

$(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