DOM（二）-11-(示例-行颜色间隔显示并高亮)

最新推荐文章于 2023-10-28 16:08:50 发布

wy_0928

最新推荐文章于 2023-10-28 16:08:50 发布

阅读量580

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47810803

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

表格样式table.css代码

table{
	border:##249bdb 1px solid;
	width:500px;
	border-collapse:collapse;	
}

table td{
	border:#249bdb 1px solid;
	padding:5px;/*td左边顶格*/
}
table th{
	border:#249bdb 1px solid;
	padding:5px;
	background-color: rgb(200,200,200);/*可以通过这种方式设置背景色*/
}

主程序代码：

<!--
添加功能1：表格行与行之间间隔颜色显示，即第一行红色，第二行绿色，……
添加功能2：鼠标停留在哪一行，该行呈现高亮状态
-->

<!-- 【注意】这里需要对表格多个行进行样式操作，所以将js代码写在<head>中 -->

<html>
	<head>
		<style type="text/css">
			@import url(table.css);
			
			/*预先定义两个样式，让表格行在加载时自动带上样式*/
			.one{/*表格奇数行样式*/
				background-color:#e1e16a;
			}
			.two{/*表格偶数行样式*/
				background-color:#75f094;
			}
			.over{/*高亮的样式（用于鼠标悬停某行）*/
				background-color:#f9360d;
			}
		</style>
		
		<script type="text/javascript">
		
			function trColor(){
				
				/*
				 *思路：
				 *1.因为要操作行的样式，所以要先获取表格对象。
				 *2.获取所有被操作的行对象。
				 *3.遍历行并给每一行指定样式。
				 */
				
				//获取表格节点对象
				var oTabNode = document.getElementById("info");

				//获取表格所有行
				var collTrNodes = oTabNode.rows;
				
				/*
				 *因为表格第一行是“姓名”“年龄”等信息，所以第一行不需要设置样式，从第二行开始遍历，又因为表格
				 *第一行对应角标是0，第二行是1，所以for循环从1开始。
				 */
				
				//定义一个变量name，用于在for循环内记录每行当前样式，从而便于for循环内部的第二个function，即鼠标离开恢复
				var name;
				
				for(var x=1;x<collTrNodes.length;x++){
					
					if(x%2==1){//判断当前被遍历到的行是奇数行还是偶数行
						collTrNodes[x].className = "one";
					}else{
						collTrNodes[x].className = "two";
					}
					
					//给每一个行对象添加两个事件，第一个是鼠标悬停在该行的效果，第二个是鼠标离开该行后样式效果恢复
					/*
					 *需要做鼠标悬停在某一行，该行高亮，鼠标离开该行，效果恢复，所以在tr行标签添加事件：
					 *（1）onmouseover：鼠标悬停状态（over意为在...上）
					 *（2）onmouseout：鼠标离开状态（out以为从...出去）
					 *且这（1）和（2）可以看作tr节点对象的属性。
					 */
					collTrNodes[x].onmouseover = function(){//做鼠标悬停某行高亮
						
						name = this.className;//先记录下当前该行样式，为了下方的“做鼠标离开某行效果恢复”
						this.className = "over";
						
					}
					
					collTrNodes[x].onmouseout = function(){//做鼠标离开某行效果恢复
						
						this.className = name;//离开某行其className属性恢复成为name
						
					}
					
				}
				
			}
			
			/*
			 *如果在js脚本里面调用自定义函数trColor()，然后刷新网页，没效果
			 *【原因】在运行时候，先加载上面的js脚本文件，由于自定义函数没被调用所以暂时不加载，然后运行到trColor()行
			 *加载自定义函数trColor()，此时由于下方<body>内的表格没有加载，导致自定义函数trColor()内的表格节点对象
			 *oTabNode值为null（表格还没加载，哪来的id?没有id又怎么能通过getElementById()方法获取节点对象？），所以
			 *导致刷新网页没效果。
			 *【注意】这个是开发时候常见问题。
			 */
			//trColor();所以一般不直接这么写
			
			//一般是在表格加载完后调用自定义方法trColor()，代码如下：
			onload = function(){
				trColor();
			}
		
		</script>
	</head>
	<body>
		
		<table id="info">
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>地址</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>27</td>
				<td>上海</td>
			</tr>
			<tr>
				<td>小强</td>
				<td>26</td>
				<td>北京</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>29</td>
				<td>广州</td>
			</tr>
			<tr>
				<td>孙八</td>
				<td>23</td>
				<td>南京</td>
			</tr>
			<tr>
				<td>二麻子</td>
				<td>19</td>
				<td>大连</td>
			</tr>
			<tr>
				<td>犀利姐</td>
				<td>32</td>
				<td>青岛</td>
			</tr>
			<tr>
				<td>旺财</td>
				<td>19</td>
				<td>深圳</td>
			</tr>
			<tr>
				<td>周七</td>
				<td>42</td>
				<td>铁岭</td>
			</tr>
			<tr>
				<td>毕姥爷</td>
				<td>18</td>
				<td>沈阳</td>
			</tr>
		</table>
	</body>
</html>