表格应用---隔行变色

最新推荐文章于 2023-01-11 16:49:06 发布

柏油

最新推荐文章于 2023-01-11 16:49:06 发布

阅读量286

点赞数

CC 4.0 BY-SA版权

分类专栏： # JAVA WEB

本文链接：https://blog.youkuaiyun.com/ldw201510803006/article/details/74877228

JAVA WEB 专栏收录该内容

60 篇文章

订阅专栏

本文介绍了一种使用纯JavaScript实现的表格行交互效果及背景颜色设置的方法。通过简单的HTML结构配合JavaScript代码，实现了鼠标悬停时改变表格行背景颜色的效果，并根据不同行号设置交替的背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			window.onclick = function(){
				var oTab = document.getElementById("tab1");
				var aTr = oTab.tBodies[0].rows;
				
				//alert(oTab.getElementsByTagName("tbody")[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
			    //alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);
			    for(var i = 0; i < aTr.length; i++){
			    	var oldColor = null ;
			    	
			    	aTr[i].onmouseover = function (){
			    	    oldColor = this.style.background;
                        this.style.background = 'green';
			    	}
			    	aTr[i].onmouseout = function (){
			    		this.style.background = oldColor;
			    	}			    	
			    	
			    	
			    	if(i%2 == 0){
			    	  aTr[i].style.background = 'grey';
			    	 }
			    	else {
			    		aTr[i].style.background = '';
			    	}
			    }
			}
		</script>
		
	</head>
	<body>
		
		<table border="1px" width="500px" id = "tab1">
			<thead>
				<td>ID</td>
				<td>姓名</td>
				<td>年龄</td>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>blue</td>
					<td>27</td>
				</tr>
				<tr>
					<td>2</td>
					<td>张三</td>
					<td>36</td>
				</tr>
				<tr>
					<td>3</td>
					<td>李斯</td>
					<td>47</td>
				</tr>				
			</tbody>
		</table>
		
	</body>
</html>