js控制表格隔行变色
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js控制隔行变色</title> </head> <body> <table id="tb1" border="1" border-collapse="collapse" cellpadding="5" width="400" height="20" cellspacing="0" bordercolor="#99cccc"> <thead> <tr> <td>编号</td> <td>作品</td> <td>时间</td> </tr> </thead> <tbody id="tb2"> <tr> <td>1</td> <td>回忆三部曲</td> <td>1995</td> </tr> <tr> <td>2</td> <td>未麻的部屋</td> <td>1997</td> </tr> <tr> <td>3</td> <td>千年女优</td> <td>2001</td> </tr> <tr> <td>4</td> <td>妄想代理人</td> <td>2004</td> </tr> <tr> <td>5</td> <td>红辣椒</td> <td>2006</td> </tr> <tr> <td>6</td> <td>东京教父</td> <td>2003</td> </tr> </tbody> </table> <script type="text/javascript"> window.onload=function tablecolor(){ var t_name = document.getElementById("tb2"); var t_len = t_name.getElementsByTagName("tr"); for(var i=0;i<=t_len.length;i++){ //偶数行时执行 if(i%2 == 0){ t_len[i].style.backgroundColor="#ffcccc"; //添加鼠标经过事件 t_len[i].onmouseover = function(){ this.style.backgroundColor="#ccffff" } //添加鼠标离开事件 t_len[i].onmouseout = function(){ this.style.backgroundColor="#ffcccc" } } else{ t_len[i].style.backgroundColor="#ffffcc"; t_len[i].onmouseover = function(){ this.style.backgroundColor="#ccffff" } t_len[i].onmouseout = function(){ this.style.backgroundColor="#ffffcc" } } } } </script> </body> </html>
分类:
Javascript
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构