下午在弄一个鼠标滑过表格行时变色的东西,做了一个Demo时,没有问题,但是放到项目中就不行了,看代码吧:
从这个Demo中看出,前三个td的颜色显示的时其自身的bgcolor颜色,而第四个td没有设置bgcolor颜色,显示的就是tr的background颜色。
<table id="dataTable" width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="b5d6e6">
<tr>
<td width="3%" height="22" background="images/bg.gif" bgcolor="#FFFFFF">
<div align="center">
<input type="checkbox" name="checkbox" value="checkbox" />
</div>
</td>
<td width="3%" height="22" background="images/bg.gif"
bgcolor="#FFFFFF">
<div align="center">
<span class="STYLE1">序号</span>
</div>
</td>
<td width="12%" height="22" background="images/bg.gif"
bgcolor="#FFFFFF">
<div align="center">
<span class="STYLE1">接收号码</span>
</div>
</td>
<td width="14%" height="22" background="images/bg.gif"
bgcolor="#FFFFFF">
<div align="center">
<span class="STYLE1">发送时间</span>
</div>
</td>
<td width="18%" background="images/bg.gif" bgcolor="#FFFFFF">
<div align="center">
<span class="STYLE1">邮件地址</span>
</div>
</td>
<td width="23%" height="22" background="images/bg.gif"
bgcolor="#FFFFFF">
<div align="center">
<span class="STYLE1">内容</span>
</div>
</td>
<td width="15%" height="22" background="images/bg.gif"
bgcolor="#FFFFFF" class="STYLE1">
<div align="center">
基本操作
</div>
</td>
</tr>
<tr>
<td height="20" bgcolor="#FFFFFF">
<div align="center">
<input type="checkbox" name="checkbox3" value="checkbox" />
</div>
</td>
<td height="20" bgcolor="#FFFFFF">
<div align="center" class="STYLE1">
02
</div>
</td>
<td height="20" bgcolor="#FFFFFF">
<div align="center">
<span class="STYLE1">13813916585</span>
</div>
</td>
<td height="20" bgcolor="#FFFFFF">
<div align="center">
<span class="STYLE1">2007-11-16 15:00:20 </span>
</div>
</td>
<td bgcolor="#FFFFFF">
<div align="center">
<span class="STYLE1">tiezhu0902@163.com</span>
</div>
</td>
<td height="20" bgcolor="#FFFFFF">
<div align="center">
<span class="STYLE1">南京科技股份有限公司…</span>
</div>
</td>
<td height="20" bgcolor="#FFFFFF">
<div align="center">
<span class="STYLE4"><img src="images/edt.gif"
width="16" height="16" />编辑 <img
src="images/del.gif" width="16" height="16" />删除</span>
</div>
</td>
</tr>
</table>
|
序号
|
接收号码
|
发送时间
|
邮件地址
|
内容
|
基本操作
|
|
02
|
13813916585
|
2007-11-16 15:00:20
|
tiezhu0902@163.com
|
南京科技股份有限公司…
|
编辑 删除
|
下面是js代码:
<script language="javascript">
function show(){
var trs=document.getElementById("dataTable").getElementsByTagName("tr");
for(i=0;i<trs.length;i++){
alert(i);
trs[i].onmouseover = function(){this.style.background = "blue"};
trs[i].onmouseout = function(){this.style.background = "none"};
}
}
</script>
搞了好长时间,表格的行始终不变色,于是在DreamWeaver中一点点缩减代码,最后发现去掉td的bgcolor="#FFFFFF"属性后,竟然成功了,原来是tr的background属性会被td的bgcolor属性覆盖,所以一直不变色。下面看一个Demo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<table width="200" height="200">
<tr style="background:red;">
<td bgcolor="blue"></td>
<td bgcolor="green"></td>
<td bgcolor="pink"></td>
<td></td>
</tr>
</table>
</body>
</html>