先看看效果:
如何让表格相邻行的颜色不同呢?
如何让表格的行的颜色间隔不同呢?
表格的行间隔变色
有如下种方式
方式一:使用纯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....
没有包含表格的第一行,因为第一行是标题.
方式二:使用JavaScript脚本实现
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
