实现表格隔行换色，鼠标经过每一行时，高亮显示，离开时恢复的另一种方法

最新推荐文章于 2019-04-11 20:31:24 发布

天空守护云

最新推荐文章于 2019-04-11 20:31:24 发布

阅读量717

点赞数

本文介绍了一种使用HTML、CSS和JavaScript实现的表格隔行换色及鼠标悬停高亮行的技术方案。通过简单的代码，可以使得表格更加美观且交互友好。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
		th,td{border: 1px solid gray;text-align: center;line-height: 35px;}
		.one{background: #eee;}
		.two{background: yellow;}
	</style>

	<script type="text/javascript">
		//页面加载事件
		window.onload=function () {
			var os=document.getElementById('tb').children;
			var preClass;//改变之前的样式的值
			//遍历节点
			for(var i=0;i<os.length;i++){
				//偶数行添加背景色
				if(i%2!=0){
					os[i].className='one';
				}	

				//添加鼠标经过事件
				os[i].onmouseover=function(){
					preClass=this.className;//获取改变前class值
					this.className='two';//高亮
				};

				//添加离开事件
				os[i].onmouseout=function(){
					//恢复样式
					this.className=preClass;
				};
			}
		};
	</script>
</head>
<body>
	<script type="text/javascript">
		/*
			1.实现表格隔行换色
			2.鼠标经过每一行时，高亮显示，离开时恢复
		*/
	</script>
	<table>
		<thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Address</th>
				<th>Gender</th>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
				<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
		</tbody>
	</table>
</body>
</html>