这篇文章主要为大家展示了“js如何实现表格隔行变色”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS如何实现表格隔行变色”这篇文章吧。具体内容如下用到的鼠标事件：（1）鼠标经过 onmouseo
这篇文章主要为大家展示了“js如何实现表格隔行变色”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JS如何实现表格隔行变色”这篇文章吧。
具体内容如下
用到的鼠标事件：（1）鼠标经过 onmouseover；（2）鼠标离开 onmouseout
核心思路：鼠标经过 tr 行的时候，当前行会改变背景颜色，鼠标离开的时候去掉背景颜色。
注意：第一行（thead 里面的行）不需要变换颜色，改变的是 tbody 里面的行。
获取元素，获取的是 tbody里面的行。
循环注册绑定事件，将 tbody 里面全部的行都得到，然后全部都注册鼠标经过和离开事件。
所有行绑定鼠标经过事件，鼠标经过当前元素（this）改变颜色；
所有行绑定鼠标离开事件，鼠标离开当前元素（this）没有颜色；
代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格隔行变色</title> <style type="text/CSS"> *{ margin:0;padding: 0; } table{ width:500px; position:relative; margin:100px auto; border-collapse:collapse; border:1px solid #d7d7d7; } thead tr{ background-color:#ccc; height:30px; } table tr{ text-align: center; height:30px; } .bg{ background: #eee; }</style></head><body><table border=1> <thead> <tr> <td width="40">序号</td> <td width="100">前端单词</td> <td width="80">基本释义</td> <td width="50">长度</td> <td width="">补充</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>select</td> <td>选择</td> <td>6</td> <td>-</td> </tr> <tr> <td>2</td> <td>target</td> <td>目标</td> <td>6</td> <td>-</td> </tr> <tr> <td>3</td> <td>input </td> <td>输出</td> <td>5</td> <td>-</td> </tr> <tr> <td>4</td> <td>button</td> <td>按钮</td> <td>8</td> <td>-</td> </tr> <tr> <td>5</td> <td>checkbox</td> <td>复选框</td> <td>8</td> <td>-</td> </tr> </tbody></table><script> //1、获取tbody里面的所有的行 var trs = document.querySelector('tbody').querySelectorAll('tr'); //2、利用循环注册事件 for(var i = 0;i<trs.length;i++){ var bGC = function(e){this.className = 'bg';} trs[i].addEventListener('mouseover',bgc) trs[i].onmouseout = function(){ this.className = ''; } }</script></body></html>显示效果：
当鼠标滑过时：
当鼠标离开时：
当然这个效果使用 CSS的 :hover 可以非常简单的实现（tbody tr:hover{background: #eee;}），但是在这个例子中主要想体现的是使用JS事件和排他思想实现的效果。
以上是“JS如何实现表格隔行变色”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！
--结束END--
本文标题: JS如何实现表格隔行变色
本文链接: https://www.lsjlt.com/news/324148.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0