您的位置：首页 > Web前端 > JavaScript

教你一天玩转JavaScript(六)——使用JavaScript完成后台数据展示表格的隔行换色

2017-05-05 22:46 567 查看

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

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

获得到控制的表格元素

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

获得表格的行数

var len = tab1.rows.length;

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

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

确定事件，即onload事件

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

获得表格中的所有的行数

遍历表格的行数

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

我摘出后台数据展示表格的页面——【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>

标签上添加

onload="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(六)——使用JavaScript完成后台数据展示表格的隔行换色！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航