鼠标经过时，改变表格背景颜色

最新推荐文章于 2023-04-21 11:18:24 发布

東刀人

最新推荐文章于 2023-04-21 11:18:24 发布

阅读量1k

点赞数 1

分类专栏： HTML Java JSP JavaScript 文章标签： function border table

本文链接：https://blog.csdn.net/cgw1123/article/details/7885456

版权

Java 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

JSP

1 篇文章 0 订阅

订阅专栏

这是一个当鼠标经过时，改变表格背景颜色的简单示例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标经过时，改变表格背景颜色</title>
</head>
<body>
<table width="500" border="1" cellpadding="0" cellspacing="0" id="t">
<tr bgcolor='blue'><td width="500" height="20">1</td></tr>
<tr bgcolor='green'><td width="500" height="20">2</td></tr>
<tr bgcolor='red'><td width="500" height="20">3</td></tr>
<tr bgcolor='#ff9933'><td width="500" height="20">4</td></tr>
<tr bgcolor='#993399'><td width="500" height="20">5</td></tr>
</table>
<script>
    ;(function(table){
        function unit(e){
            e = e || event;
            return e.target || e.srcElement;
        }
		var temp = "";
        table.onmouseover = function(e){var o=unit(e);temp = this.style.backgroundColor;o.style.backgroundColor = '#ccc';};
        table.onmouseout = function(e){var o = unit(e);o.style.backgroundColor = temp};
    }(document.getElementById('t')));
</script>
</body>
</html>

希望对大家有所帮助！