dom 表格制作列表变色

最新推荐文章于 2019-11-15 16:28:36 发布

王凯华

最新推荐文章于 2019-11-15 16:28:36 发布

阅读量188

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/baidu_39016558/article/details/86651302

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!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.鼠标经过每一行时，高亮显示，离开时恢复
		*/
		//页面预加载事件
		window.onload=function(){
	    var tbody=document.getElementById('tbody').children;
               var leave;//改变前的样式
              //遍历节点
	              for(var i=0;i<tbody.length;i++){

	              	//偶数行添加背景色
	              	if(i%2!=0){
	              		tbody[i].className='one';
	              	}
	              	//添加鼠标经过事件
	              	tbody[i].onmouseover=function(){
	              		leave=this.className;
	              		//点击 改变class 值
	              		this.className='two';
	                };
	                //鼠标离开事件
	                tbody[i].onmouseleave=function(){
	                	//恢复样式
	                	this.className=leave;
	                }

              }
		}
	</script>
	<table>
		<thead>
		<tr>
			<th>ID</th>
			<th>Name</th>
			<th>Address</th>
			<th>Gender</th>
		</tr>
	    </thead>
	    <tbody id="tbody">
		<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>
</body>
</html>