js实现鼠标移动高亮显示表格行

实现功能：鼠标移动到某一行后该行变色（粉色）显示，移出后恢复原来颜色。
用到的事件： 1.onmouseover事件属性在鼠标指针移动到元素上时触发 2. onmouseout事件鼠标指针移出指定的对象时触发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>高亮显示表格的行</title>
	<style type="text/css">
		.biao{
			width: 500px;
			margin: 100px auto;
		}
		.biao h2{
			color: red;
			margin: 10pxS auto;
			font-size: 32px;
		}
		.biao .biao-tb{
			width: 500px;			
			border: 1px solid #369;
			text-align: center;
			font-size: 14px;
			font-family: 微软雅黑;
			border-collapse: collapse;
		}
		.biao .biao-tb th,.biao .biao-tb td{
			border: 1px solid #369;
			padding: 5px;
		}
		.biao .biao-tb .first-row{
			background-color: red;
			color: #fff;
		}
	</style>
</head>
<body>
	<div class="biao">
	<h2>成绩单</h2>
	<table class="biao-tb">
			<tr class="first-row">
				<th>姓名</th>
				<th>张飞</th>
				<th>黎明</th>
				<th>王伟</th>
				<th>刘芳</th>
				
			</tr>
			<tr>
				<th>语文</th>
				<th>120</th>
				<th>110</th>
				<th>100</th>
				<th>96</th>
			</tr>
			<tr>
				<th>数学</th>
				<th>100</th>
				<th>90</th>
				<th>100</th>
				<th>90</th>
			</tr>
			<tr>
				<th>英语</th>
				<th>120</th>
				<th>90</th>
				<th>100</th>
				<th>98</th>
			</tr>
			<tr>
				<th>理综</th>
				<th>220</th>
				<th>180</th>
				<th>160</th>
				<th>120</th>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		var tab= document.getElementsByClassName('biao-tb')[0];
		var trs =tab.getElementsByTagName('tr');//获取所有的tr标签
		for(var i=0;i<trs.length;i++){
			trs[i].onmouseover = function(){   //鼠标移动上事件
				if(this.className!='first-row'){
					this.style.backgroundColor='pink';
				}
			}
			trs[i].onmouseout= function(){		//鼠标移出事件 
				if(this.className!='first-row'){
					this.style.backgroundColor='#fff';
				}
			}
		}
	</script>
</body>
</html>

我不做大哥好多年

发布了3 篇原创文章 · 获赞 2 · 访问量 343

私信关注

js实现鼠标移动高亮显示表格行

猜你喜欢