编程语言
首页 > 编程语言> > 【Web前端】【JavaScript】实现表格隔行变色

【Web前端】【JavaScript】实现表格隔行变色

作者：互联网

方法1：原生JavaScript

设置CSS

    table td{
        border:red solid 1px;
    }
.tr1{
    color:white;
        background: black;
    }
.tr2{
    color:black;
        background: white;
    }
    .tr2:hover{
        color:red;
        background: yellow;
    }

设置JavaScript

（1）获取tr标签

 var ctr=document.getElementById("tab").getElementsByTagName("tr");

（2）使用循环

 function fun(){
            for(i=0;i<ctr.length;i++){
                ctr[i].className=((i+1)%2>0)?"tr1":"tr2";
            }
        }

（3）调用js

window.onload=fun;

注意事项：该JavaScript代码需要在加载完毕后执行。

点击查看完整代码 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style>
table td{
        border:red solid 1px;
    }
.tr1{
    color:white;
        background: black;
    }
.tr2{
    color:black;
        background: white;
    }
.tr2:hover{
        color:red;
        background: yellow;
    }
</style>
    
</head>

<body>
    <table id="tab">
        <tr>
            <td>mllt</td>
            <td>mllt</td>
            <td>mllt</td>
        </tr>
        <tr>
            <td>mllt</td>
            <td>mllt</td>
            <td>mllt</td>
        </tr>
        <tr>
            <td>mllt</td>
            <td>mllt</td>
            <td>mllt</td>
        </tr>
        <tr>
            <td>mllt</td>
            <td>mllt</td>
            <td>mllt</td>
        </tr>
        <tr>
            <td>mllt</td>
            <td>mllt</td>
            <td>mllt</td>
        </tr>
        <tr>
            <td>mllt</td>
            <td>mllt</td>
            <td>mllt</td>
        </tr>
        <tr>
            <td>mllt</td>
            <td>mllt</td>
            <td>mllt</td>
        </tr>
        <tr>
            <td>mllt</td>
            <td>mllt</td>
            <td>mllt</td>
        </tr>
        <tr>
            <td>mllt</td>
            <td>mllt</td>
            <td>mllt</td>
        </tr>
        <tr>
            <td>mllt</td>
            <td>mllt</td>
            <td>mllt</td>
        </tr>
    </table>
</body>
    <script>
        var ctr=document.getElementById("tab").getElementsByTagName("tr");
        function fun(){
            for(i=0;i<ctr.length;i++){
                ctr[i].className=((i+1)%2>0)?"tr1":"tr2";
            }
        }
    window.onload=fun;
    </script>
</html>

标签：Web,color,JavaScript,隔行,black,background,mllt,tr2
来源： https://www.cnblogs.com/mllt/p/web_table_jsChangeColor.html