获取除过标题栏的其他所有的tr行元素,循环进行判断奇偶行,通过className 设置不同的class,从而设置不同的样式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>07-表格隔行变色.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table {
border: 1px red solid;
width: 500px;
margin: auto;
}
td {
border: 1px blue solid;
margin: 10px;
padding: 10px;
text-align: center;
}
th {
background-color: maroon;
}
.one {
background-color: blue;
}
.two {
background-color: green;
}
.over {
background-color: aqua;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 选中所有的tr,除过第一个行
var line = document.getElementsByTagName("tr");
// 判断奇数行/偶数行
for (var i = 1; i < line.length; i++){
// i % 2 是求余,当余数为0时,说明是偶数
// 当余数为1时,说明这是一个奇数行
if ( i % 2 == 0) {
line[i].className = "two";
} else {
line[i].className = "one";
}
// 定义一个变量来保存修改这个class属性值之前的旧的样式名
var oldClass = "";
// 当鼠标移进去的时候的事件
line[i].onmouseover = function(){
oldClass = this.className;
this.className = "over";
}
// 当鼠标移出的时候的事件
line[i].onmouseout = function() {
this.className = oldClass;
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr class="one">
<td>高杰</td>
<td>18</td>
<td>闵行</td>
</tr>
<tr class="two">
<td>李刚</td>
<td>16</td>
<td>上海</td>
</tr>
<tr>
<td>赵士龙</td>
<td>22</td>
<td>东莞</td>
</tr>
<tr>
<td>鲁宾</td>
<td>29</td>
<td>北京</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
<tr>
<td>刘鹏</td>
<td>13</td>
<td>幼儿园</td>
</tr>
</table>
</body>
</html>