您当前位置：首页 > web前端 > jscript > JavaScript 实现表格隔行换色的效果

JavaScript 实现表格隔行换色的效果

来源：程序员人生发布时间：2014-04-09 16:48:18 阅读次数：2800次

通过为<tr>元素添加属性或类型选择器，再通过CSS设置可以实现双色表格，但如果表格很长，逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。其实在前几天的网页特效中，我们也曾发表了这样的例子《表格隔行换色特效》。

原理其实很简单：利用getElementsByTagName得到所有的<tr>元素，然后分别为奇数项和偶数项的<tr>元素添加背景颜色。

让我们一起看一下效果：

<html><head><title>双色表格</title><style type="text/css"></style><script type="text/javascript" > function color() { //把表头设为紫色 var th = document.getElementById("th"); th.style.background = "violet" //1.得到所有<tr>元素 var trs = document.getElementsByTagName("tr"); var i; for(i = 1; i <trs.length; i++) { //2.改变<tr>元素的背景颜色 if(i % 2 == 0) { trs[i].style.background = "yellow"; } else { trs[i].style.background = "olive"; } } } window.onload = color; </script></head><body><center><table><tr id="th"><th>姓名</th><th>科目</th><th>成绩</th></tr><tr><td>张三</td><td>语文</td><td>90</td></tr><tr><td>张三</td><td>数学</td><td>87</td></tr><tr><td>李四</td><td>数学</td><td>68</td></tr><tr><td>王五</td><td>英语</td><td>76</td></tr></table></center></body></html>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 你的网站价值多少：谈网站未来的生存空间

下一篇 uniqueidentifier数据类型常识及应用

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点