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

最新推荐文章于 2024-04-07 20:24:55 发布

萌狼蓝天

最新推荐文章于 2024-04-07 20:24:55 发布

阅读量1.6k

点赞数

分类专栏：【萌狼原创】Java 文章标签： css web javascript js html

原创文章谢绝转载！不允许搬运！不授权任何人！

本文链接：https://blog.csdn.net/ks2686/article/details/124031622

版权

【萌狼原创】Java 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这段代码展示了如何使用原生JavaScript根据行索引交替设置表格行的样式。通过获取表格的所有行，并利用循环为每行分配不同的CSS类，实现了黑白相间的行背景效果。当鼠标悬停在行上时，行的背景颜色会变为黄色，文字颜色变为红色。此代码适用于网页中需要动态改变表格样式的场景。

摘要由CSDN通过智能技术生成

方法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>