表格中鼠标移入时变色，移出又恢复

最新推荐文章于 2023-11-17 17:49:57 发布

lyx_lyq

最新推荐文章于 2023-11-17 17:49:57 发布

阅读量1.4k

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/lyx_lyq/article/details/50929840

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title></title>

	</head>
	<body>
	<table id="mytable" >
	<tr>
	<th>序号</th><th>姓名</th><th>性别</th><th>电话</th><th>地址</th>
	</tr>
	<tr>
	<td>1</td><td>张三</td><td>女</td><td>13312345678</td><td>四川省成都市</td>
	</tr>
	<tr>
	<td>2</td><td>李四</td><td>男</td><td>12999803382</td><td>四川省德阳市</td>
	</tr>
	<tr>
	<td>3</td><td>王五</td><td>男</td><td>13311955678</td><td>四川省乐山市</td>
	</tr>
	<tr>
	<td>4</td><td>赵六</td><td>女</td><td>13539412348</td><td>四川省成都市</td>
	</tr>
	</table>
	<script>
	//将鼠标指向的那一行改变背景色，同时鼠标移开后恢复原本的背景色
	window.οnlοad=function(){
	var mytable = document.getElementById("mytable");
	mytable.style.borderCollapse="collapse";
	mytable.style.border="1px solid gray";
	mytable.style.width="800px";
	mytable.style.textAlign="center";

	for(i=0; i<mytable.rows.length; i++){
	if(i==0){
	mytable.rows[0].style.backgroundColor="lightgray";
	}else{
	mytable.rows[i].style.cursor="pointer";

	//
	mytable.rows[i].οnmοuseοver=function(){
	this.style.backgroundColor="lightyellow" ;
	}

	if(i%2==0){
	mytable.rows[i].style.backgroundColor="yellow";
	mytable.rows[i].οnmοuseοut=function(){
	this.style.backgroundColor="yellow";
	}
	}else{
	mytable.rows[i].style.backgroundColor="orange";
	mytable.rows[i].οnmοuseοut=function(){
	this.style.backgroundColor="orange";
	}
	}
	}
	for(j=0; j<mytable.rows[i].cells.length; j++){
	var cell=mytable.rows[i].cells[j];
	cell.style.border=mytable.style.border;
	}
	}

	}
	</script>
	</body>
	</html>