【javascript】表格行间隔显示颜色，并实现高亮显示效果

最新推荐文章于 2021-06-01 14:42:45 发布

Jeep_Dom

最新推荐文章于 2021-06-01 14:42:45 发布

阅读量1.6k

点赞数

分类专栏： Javascript 文章标签： javascript onmouseover onmouseout

本文链接：https://blog.csdn.net/jeep_ouc/article/details/17022939

版权

Javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
 var name;  //存储tr对象的类名，当鼠标移开时进行恢复
 function trcolor(){  //表格行颜色间隔显示
	 var tabNode = document.getElementsByTagName("table")[0];
	 var trNodes = tabNode.rows;
	 for(var x=1;x<trNodes.length;x++){
		 if(x%2 == 1)
			 trNodes[x].className = "one" ; 
		 else 
			 trNodes[x].className = "two" ;
		 trNodes[x].onmouseover = function(){  //高亮显示
			 name = this.className;
			 this.className = "over";
		 }
		 trNodes[x].onmouseout = function(){  //tr对象添加onmouseout事件属性
			 this.className = name ;
		 }
	 }
 }
 	window.onload = trcolor ;
</script>

<style type="text/css">
	table{ width:60%; border:solid 1px #0066FF;}
	table td {border:solid 1px #0099ff;}
	a{ text-decoration: none;}
	.one{background-color: red;}
	.two{background-color: blue;}
	.over{background-color: yellow;}
</style>

</head>
<body>
	<table>
		<tr>
			<td>姓名</td><td>年龄</td><td>地址</td>
		</tr>
		<tr>
			<td>张三</td><td>23</td><td>北京</td>
		</tr>
		<tr>
			<td>李四</td><td>25</td><td>上海</td>
		</tr>
		<tr>
			<td>王五</td><td>15</td><td>广州</td>
		</tr>
		<tr>
			<td>唐总</td><td>20</td><td>长沙</td>
		</tr>
	</table>
</body>

Jeep_Dom

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【javascript】表格行间隔显示颜色，并实现高亮显示效果

var name; //存储tr对象的类名，当鼠标移开时进行恢复 function trcolor(){ //表格行颜色间隔显示 var tabNode = document.getElementsByTagName("table")[0]; var trNodes = tabNode.rows; for(var x=1;x<trNodes.length;x++){ if(
复制链接

扫一扫