<!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> |
表格中鼠标移入时变色,移出又恢复
最新推荐文章于 2023-11-17 17:49:57 发布