记住--隔行换色

兜里ヌ有糖

于 2020-04-25 15:09:10 发布

阅读量118

点赞数

分类专栏：需要记住的程序

本文链接：https://blog.csdn.net/qq_43980232/article/details/105750178

版权

需要记住的程序专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			table{
				border: 1px black solid;
				border-collapse: collapse;
			}
			th{
				border: 1px black solid;
				width: 50px;
				height: 30px;
			}
			td{
				border: 1px black solid;
				width: 50px;
				height: 30px;
			}
		</style>
	</head>
	<body>
		<table id="tab">
			<tr><th>id</th><th>name</th><th>age</th></tr>
			<tr><td>1</td><td>张三</td><td>12</td></tr>
			<tr><td>2</td><td>李四</td><td>13</td></tr>
			<tr><td>3</td><td>王五</td><td>14</td></tr>
			<tr><td>4</td><td>赵六</td><td>15</td></tr>
			<tr><td>5</td><td>张三</td><td>12</td></tr>
			<tr><td>6</td><td>李四</td><td>13</td></tr>
			<tr><td>7</td><td>王五</td><td>14</td></tr>
			<tr><td>8</td><td>赵六</td><td>15</td></tr>
			<tr><td>9</td><td>张三</td><td>12</td></tr>
			<tr><td>10</td><td>李四</td><td>13</td></tr>
			<tr><td>11</td><td>王五</td><td>14</td></tr>
			<tr><td>12</td><td>赵六</td><td>15</td></tr>
			<tr><td>13</td><td>张三</td><td>12</td></tr>
			<tr><td>14</td><td>李四</td><td>13</td></tr>
			<tr><td>15</td><td>王五</td><td>14</td></tr>
			<tr><td>16</td><td>赵六</td><td>15</td></tr>
		</table>
	</body>
	<script type="text/javascript">
		window.onload =function(){
			var tableElement=document.getElementById("tab");
			console.log(tableElement.rows);
			for(var i=0;i<tableElement.rows.length;i++){
				if(i%2==0){
					tableElement.rows[i].bgColor="#e9e7ef";
				}else{
					tableElement.rows[i].bgColor="#fffbf0"
				}
			}
		}
	</script>
</html>