前端简单入门第十二讲使用JavaScript完成后台数据展示表格的隔行换色-白红宇的个人博客

发布日期：2021-06-30 18:00:42 浏览次数：4 分类：技术文章

本文共 2385 字，大约阅读时间需要 7 分钟。

在后台展示数据的页面上，通常需要使用表格标签来进行数据的展示，那些没有背景的表格是比较难看的，但我们可以使用JavaScript来控制表格的隔行换色。效果类似如下：

要想使用JavaScript来控制表格的隔行换色，最核心的一步就是使用JavaScript来获得表格的行数，步骤为：

获得到控制的表格元素

var tab1 = document.getElementById("tab1");

获得表格的行数
```
var len = tab1.rows.length;
```

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

创建一个HTML页面，最重要的一个页面就是后台数据展示表格的页面；

确定事件，即onload事件；

触发一个函数，在这个函数中获得要操作的表格；

获得表格中的所有的行数；

遍历表格的行数；

判断是否是奇数行还是偶数行。

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

			
   						
   
			         				      分类的ID 				      分类的名称 				      分类的描述 				      操作 			     
			     				      1 				      手机数码 				      手机数码 				      修改|删除 			     
			     				      2 				      电脑办公 				      电脑办公 				      修改|删除 			     
			     				      3 				      烟酒糖茶 				      烟酒糖茶 				      修改|删除 			     
			     				      4 				      鞋靴箱包 				      鞋靴箱包 				      修改|删除 			     
			     				      5 				      汽车用品 				      汽车用品 				      修改|删除

先确定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";		}	}}

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

这样一来，表格中的第一行也变换颜色了。如果我们不想让第一行变换颜色，除了可以在遍历每一行上做手脚之外，我们也可结合使用表格中的tbody和thead标签来完成。

首先将【data.html】页面的内容改为：

			
   						
   
			    				     					      分类的ID 					      分类的名称 					      分类的描述 					      操作 				     
			    
			    				     					      1 					      手机数码 					      手机数码 					      修改|删除 				     
				     					      2 					      电脑办公 					      电脑办公 					      修改|删除 				     
				     					      3 					      烟酒糖茶 					      烟酒糖茶 					      修改|删除 				     
				     					      4 					      鞋靴箱包 					      鞋靴箱包 					      修改|删除 				     
				     					      5 					      汽车用品 					      汽车用品 					      修改|删除

分类的ID	分类的名称	分类的描述	操作
1	手机数码	手机数码	修改\|删除
2	电脑办公	电脑办公	修改\|删除
3	烟酒糖茶	烟酒糖茶	修改\|删除
4	鞋靴箱包	鞋靴箱包	修改\|删除
5	汽车用品	汽车用品	修改\|删除

然后编写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";		}	}}

读者如需查看源码，请参考！

转载地址：https://liayun.blog.csdn.net/article/details/71246485 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：前端简单入门第十三讲使用JavaScript完成复选框的全选和全不选的效果

下一篇：前端简单入门第十一讲使用JavaScript完成注册页面表单提示及校验

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章