前端简单入门第十二讲 使用JavaScript完成后台数据展示表格的隔行换色
发布日期:2021-06-30 18:00:42
浏览次数:3
分类:技术文章
本文共 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 | 汽车用品 | 汽车用品 | 修改|删除 |
然后编写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 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
网站不错 人气很旺了 加油
[***.192.178.218]2024年04月28日 23时20分35秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
Boundary loss 损失函数
2019-04-30
tensorflow使用tensorboard进行可视化
2019-04-30
凸优化 convex optimization
2019-04-30
数据库索引 & 为什么要对数据库建立索引 / 数据库建立索引为什么会加快查询速度
2019-04-30
IEEE与APA引用格式
2019-04-30
research gap
2019-04-30
pytorch训练cifar10数据集查看各个种类图片的准确率
2019-04-30
Python鼠标点击图片,获取点击点的像素坐标
2019-04-30
路径规划(一) —— 环境描述(Grid Map & Feature Map) & 全局路径规划(最优路径规划(Dijkstra&A*star) & 概率路径规划(PRM&RRT))
2019-04-30
RRT算法(快速拓展随机树)的Python实现
2019-04-30
D*算法
2019-04-30
强化学习(四) —— Actor-Critic演员评论家 & code
2019-04-30
RESTful API
2019-04-30
优化算法(四)——粒子群优化算法(PSO)
2019-04-30