鼠标移到某一行 某一行变色 鼠标移开恢复

时间:2021-02-05 06:24:19

这好像是周一还是周二的课堂作业

吃完午饭在思考这个东西怎么做

感觉超有感觉的

虽然不是很炫酷,但是效果很漂亮

<div>
javascript综合练习二
</div>
<div>
<table>
<tr>
<th>序号</th><th>姓名</th><th>生日</th><th>性别</th><th>联系电话</th><th>操作</th>
</tr>
<tr>
<td>1</td><td>张三</td><td>1992-03-03</td><td>男</td><td>13312345555</td><td><a href="#">查看</a></td>
</tr>
<tr>
<td>2</td><td>丽萨</td><td>1992-03-15</td><td>女</td><td>13312666234</td><td><a href="#">查看</a></td>
</tr>
<tr>
<td>3</td><td>王湾</td><td>1993-03-02</td><td>男</td><td>13312341488</td><td><a href="#">查看</a></td>
</tr>
<tr>
<td>4</td><td>张建军</td><td>1996-12-03</td><td>男</td><td>13312341234</td><td><a href="#">查看</a></td>
</tr>
<tr>
<td>5</td><td>玛娃</td><td>1992-05-03</td><td>女</td><td>13312341234</td><td><a href="#">查看</a></td>
</tr>
<tr>
<td>1</td><td>呵呵呵</td><td>1992-10-03</td><td>男</td><td>13312341234</td><td><a href="#">查看</a></td>
</tr>
</table>
</div>
<button onclick="settable()">设置表格样式</button>
<ul>表格要求:
<li>表格加上边框,宽度为1px,直线,颜色#D3D3D3</li>
<li>表格总宽度800px, 第一行背景色为#87CEFA,后面的奇数行为#E0FFFF, 偶数行为#ADD8E6</li>
<li>鼠标移入到表格中,除了第一行以外,其它数据行背景色被变为#FFA07A,离开该行后颜色恢复</li>
</ul>


<script>
function settable(){
var mytable = document.getElementsByTagName('table')[0];

mytable.style.border = '1px solid #D3D3D3';
mytable.style.borderCollapse = 'collapse';
mytable.style.width = '800px';

for(var i=0; i<mytable.rows.length; i++){
//给出每行的背景色
if(i==0){
mytable.rows[0].style.backgroundColor = '#87CEFA';
}else{
// 每行在鼠标移入时改变背景色
mytable.rows[i].onmouseover = function(){
this.style.backgroundColor = '#FFA07A';
}


//设置奇数行和偶数行不同的背景色
if(i%2==0){
mytable.rows[i].style.backgroundColor = '#ADD8E6';
// 每行在鼠标移出时恢复背景色
mytable.rows[i].onmouseout=function(){
this.style.backgroundColor = '#ADD8E6';
}
}else{
mytable.rows[i].style.backgroundColor = '#E0FFFF';
// 每行在鼠标移出时恢复背景色
mytable.rows[i].onmouseout=function(){
this.style.backgroundColor = '#E0FFFF';
}
}
}


//给出格子的边框
for(var j=0; j<mytable.rows[i].cells.length; j++){
mytable.rows[i].cells[j].style.border = '1px solid #D3D3D3';
}
}

}