Java教程

【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前端】【JavaScript】实现表格隔行变色的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航