td的bgcolor属性覆盖tr的background属性，导致tr设置background颜色时显示不了

最新推荐文章于 2022-04-14 14:24:06 发布

原创最新推荐文章于 2022-04-14 14:24:06 发布 · 4.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#class #div #dreamweaver #function #javascript #input

Web前端专栏收录该内容

1 篇文章

订阅专栏

本文探讨了一个在表格行上实现鼠标滑动变色功能的问题，并通过代码示例详细解释了如何解决该问题。通过分析代码，发现tr的background属性会被td的bgcolor属性覆盖，导致变色效果无法正常显示。最终通过去除td的bgcolor属性解决了问题，并提供了代码演示以加深理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下午在弄一个鼠标滑过表格行时变色的东西，做了一个Demo时，没有问题，但是放到项目中就不行了，看代码吧：

<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>

从这个Demo中看出，前三个td的颜色显示的时其自身的bgcolor颜色，而第四个td没有设置bgcolor颜色，显示的就是tr的background颜色。