表格的 行与行之间 以颜色间隔、鼠标经过行 高亮显示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>行以颜色间隔 & 高亮经过行</title>
<style type="text/css">
table{
width:360px;
border:thin solid #33C;
}
tr{
height:30px;
}
td{
border:thin solid #30C;
text-align:center;
line-height:30px;
}
th{
background-color:#09C;
border:thin solid #30C;
line-height:30px;
}
.two{
background-color:#CFF;
}
.over{
background-color:#F9C;
}
</style>
<script type="text/javascript">
var name;
function colorfulRows(){
var tableNode = document.getElementsByTagName("table")[0];
var rows = tableNode.rows;
for(var x=1; x<rows.length; x++){
if(x%2==0){
rows[x].className = "two";
}
//因为这里是在描述两个事件,所以节点的引用必须是this。
rows[x].onmouseover = function(){
name = this.className;
this.className = "over";
}
rows[x].onmouseout = function(){
this.className = name;
}
}
}
window.onload = colorfulRows;
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>所在地</th>
</tr>
<tr>
<td>张三</td>
<td>38</td>
<td>上海</td>
</tr>
<tr>
<td>李四</td>
<td>4</td>
<td>广东</td>
</tr>
<tr>
<td>王五</td>
<td>46</td>
<td>桂林</td>
</tr>
<tr>
<td>周七</td>
<td>27</td>
<td>陕西</td>
</tr>
<tr>
<td>赵六</td>
<td>56</td>
<td>武汉</td>
</tr>
<tr>
<td>康八</td>
<td>31</td>
<td>四川</td>
</tr>
</table>
</body>
</html>
效果: