计算机二级考试指导:javascript:JS实现双色表格-计算机等级考试-计算机-珠峰网 www.my8848.com

计算机二级考试指导:javascript:JS实现双色表格

发布时间：2010/3/24 16:31:57 来源：城市学习网编辑：admin

　　javascript:JS实现双色表格
　　通过为tr元素添加属性或类型选择器，再通过CSS设置可以实现双色表格，但如果表格很长，逐个元素添加可真麻烦。而且这样的代码维护起来不容易。所以比较好的方式是用JS实现。
　　原理其实很简单：利用getElementsByTagName得到所有的tr元素，然后分别为奇数项和偶数项的tr元素添加背景颜色。
　　核心代码：
　　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
　　全部代码：
　　Code
　　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
　　td90/td
　　/tr
　　tr
　　td张三/td
　　td数学/td
　　td87/td
　　/tr
　　tr
　　td李四/td
　　td数学/td
　　td68/td
　　/tr
　　tr
　　td王五/td
　　td英语/td
　　td76/td
　　/tr
　　/table
　　/center
　　/body
　　/html