<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
</style>
<script>
/**
功能实现:1、实现表格隔行变色功能
2、实现鼠标移入表格当前行高亮展示
步骤:1、根据表格id获取当前表格
2、获取表格中的tBody(Bodies[0])
3、循环tBody中的行数,偶数行设置背景色为灰色
*/
window.onload = function(){
//获取ID为tab1的表格
var oTab = document.getElementById('tab1');
//*为防止行事件变色后将原来的背景色覆盖掉,定义变量记录原背景色
var preBackground=null;
//alert(oTab.tBodies[0].rows.length);
//循环遍历表格每一行
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
//判断当前行是否为偶数行
if(i%2==0){
//设置当前行的背景色
oTab.tBodies[0].rows[i+1].style.background='gray';
}
//为每一行增加鼠标移入事件
oTab.tBodies[0].rows[i].onmouseover = function(){
preBackground = this.style.background;
this.style.background='yellow';
}
//为每一行增加鼠标移出事件
oTab.tBodies[0].rows[i].onmouseout = function(){
this.style.background=preBackground;
}
}
}
</script>
</head>
<body>
<table border="1px" width="300px" id="tab1">
<tHead>
<tr>
<td>ID</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</tHead>
<tBody>
<tr>
<td>1</td>
<td>张三</td>
<td>22</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>27</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>50</td>
</tr>
<tr>
<td>5</td>
<td>王小七</td>
<td>30</td>
</tr>
<tr>
<td>6</td>
<td>刘小二</td>
<td>36</td>
</tr>
</tBody>
</table>
</body>
</html>
js表格中的DOM操作之隔行变色,鼠标进入当前行高亮
最新推荐文章于 2019-03-25 11:21:59 发布