<!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=gb2312" />
<title>隔行变色，并且鼠标放上去也变色</title>
<style>
.top{
background-color:#3F0;
color:#FF0;}
table{
border:1px #000 dashed;
border-collapse:collapse;}
td,th{
border:#F00 1px solid;}
.one{
background-color:#0CF;}
.two{
background-color:#C06;}
.over{
background-color:#FF9;}
</style>
</head>
<script language="javascript" type="text/javascript">
function geHang(){
//获取所有的tr
var trlist=document.getElementsByTagName("tr");
for(var i=1;i<trlist.length;i++){
if(i%2==0){
trlist[i].className="two";
}else{
trlist[i].className="one";
}
//进行遍历，并且判断
}
}
//当鼠标移动到这后改变当前行的颜色
var color="";
function over(trNode){
color=trNode.className;
//将当前行颜色设定为over
trNode.className="over";
}
//当鼠标移开的时候，我们原来行的颜色色丁回来
function out(trNode){
//还原以前的颜色
trNode.className=color;
}
</script>
<body onload="geHang()">
<table width="500" border="0">
<tr class="top">
<th>年龄</th>
<th>电话</th>
<th>游戏</th>
<th>姓名</th>
<th>性别</th>
<th>住址</th>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td>2</td>
<td>222222222</td>
<td>信息</td>
<td>二</td>
<td>女</td>
<td>保定</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td> </td>
<td> </td>
<td>hdfds</td>
<td>dfds</td>
<td>多发点</td>
<td>上大富</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>订购单</td>
</tr>
<tr onmouseover="over(this)" onmouseout="out(this)">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
扫一扫
2501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
