前端实现表格隔行变色

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

牛肉饼加个煎蛋

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

阅读量1.5k

点赞数

分类专栏：前端 javascript

本文链接：https://blog.csdn.net/weixin_41551266/article/details/82414536

版权

前端同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

javascript

9 篇文章 1 订阅

订阅专栏

前端——JS

4 篇文章 0 订阅

订阅专栏

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值的改变与判断，来实现隔行变色。