【Web前端】【JavaScript】实现表格隔行变色
2021/12/30 22:07:10
本文主要是介绍【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】实现表格隔行变色的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南
- 2024-09-26Springboot微服务资料入门教程