实现表格隔行换色，鼠标经过每一行时，高亮显示，离开时恢复。

最新推荐文章于 2019-10-28 16:58:50 发布

天空守护云

最新推荐文章于 2019-10-28 16:58:50 发布

阅读量611

点赞数

本文链接：https://blog.csdn.net/weixin_44606660/article/details/86617604

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
		th,td{border: 1px solid gray;text-align: center;line-height: 35px;}
		.one{background: #eee;}
		.two{background: yellow}
	</style>
</head>
<body>
	<script type="text/javascript">
		/*
			1.实现表格隔行换色
			2.鼠标经过每一行时，高亮显示，离开时恢复
		*/
	</script>
	<table>
	    <thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Address</th>
				<th>Gender</th>
			</tr>
		</thead>
		<tbody id="tb">
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
			<tr>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
				<td>aaaa</td>
			</tr>
		</tbody>
	</table>
	<script type="text/javascript">
		var tb=document.getElementById("tb");
		var t=tb.children;
		var index;
		for(var i=0;i<t.length;i++){
			if (i%2==0) {
				t[i].className="one";
			}
		}
		for(var i=0;i<t.length;i++){
			t[i].index=t[i].className;
				t[i].onmouseover=function(){
	                this.className="two";
				};
				t[i].onmouseout=function(){
					this.className=this.index;
				};
		}
	</script>
</body>
</html>

天空守护云

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
实现表格隔行换色，鼠标经过每一行时，高亮显示，离开时恢复。

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; table{width
复制链接

扫一扫