我们需要通过JS实现鼠标放到表格上整行变色，下面青岛网站建设青华互联就来介绍一下如何实现这个功能呢。
表格HTML代码如下：
<table> <thead> <tr> <th></th> <th>班级类型</th> <th>开班时间</th> <th>开班状态</th> </tr> </thead> <tbody id="tb"> <tr> <td> <input type="checkbox" /> </td> <td>基础班</td> <td>2021-08-31</td> <td>报满已开</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>基础班</td> <td>2021-09-11</td> <td>报满已开</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>高手班</td> <td>2021-08-05</td> <td>报满已开</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>高手班</td> <td>2021-09-28</td> <td>报满已开</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>高手班</td> <td>2021-11-11</td> <td>即将开班</td> </tr> </tbody></table>
功能实现思路：
1、事件委托，将mouseover事件绑定到tbody上，当鼠标移动到表格上时触发
2、通过target事件对象找到父级元素tr，并改变其背景色
3、将mouseout事件绑定到tbody上，鼠标移出时触发
下面通过代码实现：
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>通过JS使表格悬浮变色|web前端高手班 http://web.itheima.com</title>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
text-align: center;
}
</style></head><body>
<table>
<thead>
<tr>
<th></th>
<th>班级类型</th>
<th>开班时间</th>
<th>开班状态</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>基础班</td>
<td>2021-08-31</td>
<td>报满已开</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>基础班</td>
<td>2021-09-11</td>
<td>报满已开</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>高手班</td>
<td>2021-08-05</td>
<td>报满已开</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>高手班</td>
<td>2021-09-28</td>
<td>报满已开</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>高手班</td>
<td>2021-11-11</td>
<td>即将开班</td>
</tr>
</tbody>
</table></body>
<script>
// 1：需要为所有tr绑定悬浮事件，利用事件委托，只需要给父级绑定事件即可
// 2：找到父级元素，绑定事件
var tb = document.getElementById('tb');
tb.onmouseover = function(ev){
// 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
// console.log(ev.target);
// 注意，触发事件的是 td ，而我们需要让tr改变背景颜色
// console.log(ev.target.parentElement)
ev.target.parentElement.style.background = '#f5f5f5'
}
tb.onmouseout = function(ev){
// 3：获取事件对象，利用事件对象获取target(具体触发事件的元素)
// console.log(ev.target);
// 注意，触发事件的是 td ，而我们需要让tr改变背景颜色
// console.log(ev.target.parentElement)
ev.target.parentElement.style.background = ''
}
// 改变当前行的背景颜色</script></html>
扫描二维码手机查看该文章
文章引用：https://www.qinghuahulian.com/news/webzhishi/1413.html
在线咨询
电话咨询
