本文详解如何使用JavaScript实现表格tbody区域行的鼠标悬停变色效果。通过获取tbody内所有行元素，循环注册onmouseover和onmouseout事件，利用排他思想在鼠标经过时添加背景类名，离开时移除类名，从而实现动态交互效果。
JavaScript实现表格tbody隔行变色交互
本文分享一段JavaScript实现表格隔行变色的具体代码示例，供读者参考学习。
实现该效果主要依赖两个鼠标事件：一是鼠标经过时的onmouseover事件，二是鼠标离开时的onmouseout事件。
核心逻辑在于：当鼠标经过表格行（tr）时，当前行的背景颜色发生改变；当鼠标离开该行时，背景颜色恢复原状。
需要注意区分表格结构，thead区域内的表头行不需要变色，交互效果仅作用于tbody区域内的数据行。
DOM元素获取与事件绑定逻辑
第一步是获取目标元素，即选中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;}）可以更简单地实现背景色变化，但本例旨在展示如何通过JavaScript事件处理及排他思想来完成该交互效果。
以上就是本文的全部内容，希望对读者的学习有所帮助，欢迎继续支持本站。