JS通过奇数项和偶数项实现两种背景颜色的表格实现代码
本文提供一种好看表格的解决方案，通过为<tr>元素添加属性或类型选择器，再通过CSS设置可以实现双背景色表格，但如果表格很长，逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。
原理其实很简单：利用getElementsByTagName得到所有的<tr>元素，然后分别为奇数项和偶数项的<tr>元素添加背景颜色。 核心代码：
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;
全部代码：
<html>
<head>
<title>双色表格</title>
<style type="text/css">
<!--
table {
border:solid 1px black;
text-align:center;
border-spacing:0px;
}
th,td {
border:solid 1px black;
width:100px;
}
-->
</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>
相关文章
- 前端开发面试题及答案(2013-12-2 16:1:8)
- 前端开发面试题（很有料）(2013-12-2 12:1:37)
- 移动Web前端优化总结(2013-11-30 15:8:27)
- 缓存多个DataURI资源 摆脱CSS Sprites图片背景位置的约束(2013-11-29 15:5:46)
- 网站前端性能优化总结(2013-11-27 15:45:35)
- 清空Chrome/IE/FF浏览器dns缓存(2013-11-27 11:39:43)
- 浏览器DNS缓存机制分析-为什么修改hosts不立即生效(2013-11-27 11:29:33)
- 详解标准W3C盒子模型和IE的css盒子模型(2013-11-26 17:40:9)
- css实现背景透明文字不透明 opacity 通过rgba颜色解决(2013-11-22 15:9:14)
- 常用区分IE6/IE7/IE8/Firefox/Opera的标识-CSS hack总结(2013-11-22 14:46:5)
