在后台展示数据的页面上，通常需要使用表格标签来进行数据的展示，那些没有背景的表格是比较难看的，但我们可以使用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>标签上添加"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完成后台数据展示表格的隔行换色！
