前端实现表格隔行变色

1.  CSS方法实现：

 

tr {background-color:expression((this.rowIndex % 2==0)?"red":"blue")}

    此处有必要说明一下，expression是css的一个属性，用法是获取圆括号中javascript中的值作为css的属性值，IE5以上支持；

  (css3方法)   

tr：nth-child(odd){ background-color: #...;}
tr: nth-child(even){ background-color: #...;}

2.javascript方法实现：

function stripeTables(){
    if(!document.getElementsByTagName) return false;
    var tables = document.getElementsByTagName("table");
    var odd, rows;
    for(var i=0; i<tables.length; i++){
        odd = false;
        rows = tables[i].getElementsByTagName("tr");
        for(var j=0; j<rows.length; j++){
            if(odd = false){
                rows[j].style.backgroundColor = "#ffffff";
                odd = false;
            }else{
                odd = true;
            }
        }
    }
}

这里封装成了一个函数，作用于的是整个页面中所有的table元素，通过对odd值的改变与判断，来实现隔行变色。