您的位置：首页 > Web前端 > HTML

html表格table实现鼠标移入移出行变色的一种可用方法

2013-07-17 17:10 941 查看

js代码中取表格每行，设置它们的onmouseover和onmouseout函数：

function showtable() {
var mainTable = document.getElementById("mainTable");
var li = mainTable.getElementsByTagName("tr");
for ( var i = 1; i <= li.length; i++) {
li[i].style.backgroundColor = "transparent";
li[i].onmouseover = function() {
this.style.backgroundColor = "#0099FF";
}
li[i].onmouseout = function() {
this.style.backgroundColor ="transparent";
}
}
}
showtable();

html中table注意一下将table的id要设置为"mainTable"：

<html>
<head>
<title>鼠标移入移出行变色.html</title>
</head>

<body>
<table id="mainTable" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5" align="center">鼠标移入移出行变色</td>
</tr>
<tr >
<td>列标题1</td>
<td>列标题2</td>
<td>类标题3</td>
<td>列标题4</td>
<td>列标题5</td>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
<td>ddd</td>
<td>eee</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
<td>DDD</td>
<td>EEE</td>
</tr>
<tr>
<td>FFF</td>
<td>GGG</td>
<td>HHH</td>
<td>III</td>
<td>JJJ</td>
</tr>
</table>
</body>

<script language="JavaScript" src="changeColor.js"></script>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航