开发者社区> 萌狼蓝天> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

【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;

q1.png

注意事项:该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>


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
前端基础知识库JavaScript闭包
在JavaScript中,闭包对于JavaScript的意义无异于指针在c++中的意义。理解闭包是我们掌握JavaScript这门语言的基础能力,而对闭包的掌握程度就可以看出来你对JavaScript这门语言的深入程度,网上关于闭包的文章也不少但多数让人看过之后一头雾水,也许是自己理解能力较差。所以我还下定决心以提问的方式来理解何谓闭包,希望能给与我有相同境遇的博友一点帮助。
0 0
前端基础知识库-JavaScript对象的深拷贝
在JavaScript数据类型分为基础类型和引用类型,而引用类型又称为对象,可见了解对象是我们真正掌握JavaScript语言的必备技能。本章主要与大家一起去探索JavaScript对象的一些经常被我们忽略的以及难以理解的知识。好了,废话不多说让我们一起进入JavaScript对象的世界吧。
0 0
JQuery JavaScript常用API整理(前端入门必学)
JQuery JavaScript常用API整理(前端入门必学)
0 0
前端(JavaScript)------变量和内置对象
在编码过程中,其保存的值可以发生改变的量称为变量。我们已经对变量十分熟悉了,但是我们今天来讨论一下变量的一些使用问题。
0 0
前端(JavaScript)------函数与对象(下)
函数是⼀段可以反复调⽤的代码块。函数还能接受输⼊的参数,不同的参数会返回不同的值。
0 0
前端(JavaScript)------函数与对象(上)
函数是⼀段可以反复调⽤的代码块。函数还能接受输⼊的参数,不同的参数会返回不同的值
0 0
前端(JavaScript)------数组
数组(array)是按照一定顺序排列的一组值,每个值都拥有自己的编号,编号从0开始。整个数组用方括号来表示。
0 0
前端(JavaScript)------字符串
字符串就是用单引号或者双引号包裹起来的,零个或多个排列在一起的字符
0 0
前端(JavaScript)------运算符及分支语句、循环语句
先判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句。
0 0
前端(JavaScript)------简介与变量
HTML中的脚本必须位于<script>与</script>标签之间
0 0
+关注
萌狼蓝天
2023届软件专业毕业生,哔哩哔哩编程开发类UP主,技术博主,担任过华为耀星大使、统信UOS校园大使。主Java全栈开发。其他:Python(爬虫、人工智能、FAST API、Flask),C#(.Net Framework)等。数据库:MySQL、MongoDB、Redis
文章
问答
文章排行榜
最热
最新
相关电子书
更多
万物互联语音交互从端开始——前端处理从技术到商业
立即下载
2022 前端技术趋势解读
立即下载
智能前端技术与实践
立即下载