前端简单入门第十二讲 使用JavaScript完成后台数据展示表格的隔行换色

7 篇文章 1 订阅
25 篇文章 2 订阅

在后台展示数据的页面上,通常需要使用表格标签来进行数据的展示,那些没有背景的表格是比较难看的,但我们可以使用JavaScript来控制表格的隔行换色。效果类似如下:
这里写图片描述
要想使用JavaScript来控制表格的隔行换色,最核心的一步就是使用JavaScript来获得表格的行数,步骤为:

  1. 获得到控制的表格元素

    var tab1 = document.getElementById("tab1");
    
  2. 获得表格的行数

    var len = tab1.rows.length;
    

了解上述知识点之后,下面我就按如下步骤来使用JavaScript完成后台数据展示表格的隔行换色:

  1. 创建一个HTML页面,最重要的一个页面就是后台数据展示表格的页面;
  2. 确定事件,即onload事件;
  3. 触发一个函数,在这个函数中获得要操作的表格;
  4. 获得表格中的所有的行数;
  5. 遍历表格的行数;
  6. 判断是否是奇数行还是偶数行。

我摘出后台数据展示表格的页面——【data.html】:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<table id="tab1" border="1" width="80%" align="center">
			<tr>
				<td>分类的ID</td>
				<td>分类的名称</td>
				<td>分类的描述</td>
				<td>操作</td>
			</tr>
			<tr>
				<td>1</td>
				<td>手机数码</td>
				<td>手机数码</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>烟酒糖茶</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>4</td>
				<td>鞋靴箱包</td>
				<td>鞋靴箱包</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
			<tr>
				<td>5</td>
				<td>汽车用品</td>
				<td>汽车用品</td>
				<td><a href="">修改</a>|<a href="">删除</a></td>
			</tr>
		</table>
	</body>
</html>

先确定onload事件,即在<body>标签上添加"changeColor()", 接着编写JavaScript代码完成后台数据展示表格的隔行换色:

function changeColor() {
	// 获得要操作的对象的控制权
	var tab1 = document.getElementById("tab1");
	// 获得表格的所有的行数
	var count = tab1.rows.length;
	// 遍历每一行,第一行也变换颜色了
	for (var i = 0; i < count; i++) {
		if (i % 2 == 0) {
			// 偶数行
			tab1.rows[i].style.backgroundColor = "#00FF00";
		} else {
			// 奇数行
			tab1.rows[i].style.backgroundColor = "#00FFFF";
		}
	}
}

我们亦可使用另外一种方式实现表格的隔行换色,核心代码如下:

<style>
	/* 奇数 */
	.odd {
		background-color: yellow;
		text-align: center;
	}
	/* 偶数 */
	.even {
		background-color: blue;
		text-align: center;
	}
</style>
<script>
	function changeColor() {
		var mytableRows = document.getElementById("tab1").rows;
		// 获得表格的所有的行数
		var count = mytableRows.length;
		// 遍历每一行,第一行也变换颜色了
		for (var i = 0; i < count; i++) {
			if (i % 2 == 0) {
				// mytableRows[i].style.backgroundColor = "blue";
				// mytableRows[i].style.textAlign = "center";
				// 上面的两行代码也可以写为下面的这一行代码
				mytableRows[i].setAttribute("class", "even");
			} else {
				mytableRows[i].setAttribute("class", "odd");
			}
		}
	}
</script>

这样一来,表格中的第一行也变换颜色了。如果我们不想让第一行变换颜色,除了可以在遍历每一行上做手脚之外,我们也可结合使用表格中的tbody和thead标签来完成。
首先将【data.html】页面的内容改为:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body onload="changeColor()">
		<table id="tab1" border="1" width="80%" align="center">
			<thead>
				<tr>
					<th>分类的ID</th>
					<th>分类的名称</th>
					<th>分类的描述</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>手机数码</td>
					<td>手机数码</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>烟酒糖茶</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td>4</td>
					<td>鞋靴箱包</td>
					<td>鞋靴箱包</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
				<tr>
					<td>5</td>
					<td>汽车用品</td>
					<td>汽车用品</td>
					<td><a href="">修改</a>|<a href="">删除</a></td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

然后编写JavaScript代码完成后台数据展示表格的隔行换色:

function changeColor() {
	// 获得要操作的对象的控制权
	var tab1 = document.getElementById("tab1");
	// 获得tbody中的所有的行
	var len =  tab1.tBodies[0].rows.length;
	for (var i = 0; i < len; i++) {
		if (i % 2 == 0) {
			tab1.tBodies[0].rows[i].style.backgroundColor = "green";
		} else {
			tab1.tBodies[0].rows[i].style.backgroundColor = "gold";
		}
	}
}

读者如需查看源码,请参考前端简单入门第十二讲 使用JavaScript完成后台数据展示表格的隔行换色

  • 2
    点赞
  • 0
    评论
  • 6
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:白松林 返回首页

打赏

李阿昀

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值