js实现表格隔行变色和鼠标移入高亮

最新推荐文章于 2024-04-14 08:44:26 发布

Q_004

最新推荐文章于 2024-04-14 08:44:26 发布

阅读量3.2k

点赞数

分类专栏： js 文章标签： js 表格隔行变色表格鼠标移入高亮 html

本文链接：https://blog.csdn.net/Q_004/article/details/77431097

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	
		</style>
		
		<script type="text/javascript">
			window.οnlοad=function()
			{
				var oTab=document.getElementById('tab1')
				var oldColor='';
			   function toColor()
			   {
			   	for(var i=0;i<oTab.tBodies[0].rows.length;i++)
			   //隔行变色
			   {    
			   	    oTab.tBodies[0].rows[i].οnmοuseοver=function()
			   	    {  //鼠标移入变色
			   	    	oldColor=this.style.background;
			   	    	this.style.background='green';
			   	    };
			   	    oTab.tBodies[0].rows[i].οnmοuseοut=function()
			   	    {   //鼠标移出恢复原来颜色
			   	    	this.style.background=oldColor;
			   	    }
			   	    if(i%2){
			   	    	oTab.tBodies[0].rows[i].style.background='';
			   	    }
			   	    else
			   	    {
			   	    	oTab.tBodies[0].rows[i].style.background='#ccc';
			   	    } 
			   }
			   }
			   toColor();   
			}
		</script>
	</head>
	<body>
		<table border="1" id="tab1" width="500">
			<thead>
				<td>ID</td>
				<td>姓名</td>
				<td>年龄</td>
				<td>操作</td>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>张三</td>
					<td>34</td>
					<td></td>
				</tr>
				<tr>
					<td>2</td>
					<td>李四</td>
					<td>11</td>
					<td> </td>
				</tr>
				<tr>
					<td>3</td>
					<td>王五</td>
					<td>34</td>
					<td></td>
				</tr>
				<tr>
					<td>4</td>
					<td>李麻子</td>
					<td>39</td>
					<td></td>
				</tr>
				<tr>
					<td>5</td>
					<td>HuHansan</td>
					<td>39</td>
					<td></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Q_004

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js实现表格隔行变色和鼠标移入高亮

代码如下： window.onload=function() { var oTab=document.getElementById('tab1') var oldColor=''; function toColor() { for(var i=0;i<oTab.tBodies[0].
复制链接

扫一扫