利用Javascript实现隔行变色

最新推荐文章于 2024-05-24 01:29:18 发布

java_zhaoyanli

最新推荐文章于 2024-05-24 01:29:18 发布

阅读量2.6k

点赞数

分类专栏： web-javascript 文章标签： JavaScript

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/50776602

版权

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
	<style>
		.back{
			background:#005aa0;
		}
	</style>
	<script>
		/**
		 * 隔行变色
		 */
		function change(){
			//1、获取 table 元素
			var tbl = document.getElementById("tbl");
			//2、获取 table 中的 tbody 元素
			var tbody = tbl.getElementsByTagName("tbody")[0];
			//3、获取 tbody 中的所有 tr 元素
			var trs = tbody.getElementsByTagName("tr");
			//4、判断 tr 的奇偶性，改变背景
			var length = trs.length;
			for(var i=0;i<length;i++){
				if(i % 2 == 0){
					trs[i].className="back";
				}
			}
		}
	</script>
 </head>


 <body>
  <button οnclick="change()">变</button>
	<table id="tbl">
		<thead>
			<tr>
				<th>姓名</th>
				<th>工资</th>
				<th>入职时间<

最低0.47元/天解锁文章

java_zhaoyanli

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用Javascript实现隔行变色

new document .back{ background:#005aa0; } /** * 隔行变色 */ function change(){ //1、获取 table 元素 var tbl = document.getElementById("tbl"); //2、获取 table 中的 tbody 元素 var
复制链接

扫一扫

专栏目录