JS实现隔行换色

最新推荐文章于 2023-03-18 19:22:16 发布

HGG-

最新推荐文章于 2023-03-18 19:22:16 发布

阅读量279

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/qq_40959562/article/details/99701900

版权

web前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title></title>
		<meta charset="utf-8"/>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			/*window.onload=function(){
				//获得表格
				var tab = document.getElementById("tab1");
				//获得行数
				var l= tab.rows.length;
				//遍历行tab.rows,隔行换色
				for(var i=0;i<l;i++){
					if(i%2==0){
						tab.rows[i].style.backgroundColor="yellow";
					}else{
						tab.rows[i].style.backgroundColor="pink";
					}
				}
				
			
			}*/
			$(function(){
				$("tr:odd").css("background-color","pink");
				$("tr:even").css("background-color","yellow");
			
			})
			
			
		</script>
	</head>
	
	<body>
		<center><h1>JS实现隔行换色！！！</h1></center>
		<table id="tab1" border="1" align="center" width="700px" height="200px" >
			<tr>
				<td>序号</td>
				<td>学科</td>
				<td>描述</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>1</td>
				<td>java</td>
				<td>万物皆对象，学了java不愁没对象！</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>2</td>
				<td>大数据</td>
				<td>海量数据的存储分析与处理，超强大的！</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
			<tr>
				<td>3</td>
				<td>前端</td>
				<td>网站和APP的页面全是他们写出来的，厉害吧！</td>
				<td><a href="#">修改</a>|<a href="#">删除</a></td>
			</tr>
		</table>
	</body>

</html>

HGG-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现隔行换色

<html> <head> <title></title> <meta charset="utf-8"/> <script src="js/jquery-3.3.1.js"></script> <script> /*window.onload=function(){ //...
复制链接

扫一扫