实现功能:鼠标移动到某一行后该行变色(粉色)显示,移出后恢复原来颜色。
用到的事件: 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>