JS实现双色表格实现代码_javascript技巧
来源：动视网
责编：小采
时间：2020-11-27 20:45:48
JS实现双色表格实现代码_javascript技巧
JS实现双色表格实现代码_javascript技巧:原理其实很简单：利用getElementsByTagName得到所有的元素，然后分别为奇数项和偶数项的元素添加背景颜色。 核心代码： 代码如下: function color() { //把表头设为紫色 var th = document.getElementById(th); th.style
导读JS实现双色表格实现代码_javascript技巧:原理其实很简单：利用getElementsByTagName得到所有的元素，然后分别为奇数项和偶数项的元素添加背景颜色。 核心代码： 代码如下: function color() { //把表头设为紫色 var th = document.getElementById(th); th.style
原理其实很简单：利用getElementsByTagName得到所有的
元素，然后分别为奇数项和偶数项的
元素添加背景颜色。
核心代码：
代码如下:
function color() {
//把表头设为紫色
var th = document.getElementById("th");
th.style.background = "violet"
//1.得到所有
元素
var trs = document.getElementsByTagName("tr");
var i;
for(i = 1; i //2.改变元素的背景颜色
if(i % 2 == 0) {
trs[i].style.background = "yellow";
} else {
trs[i].style.background = "olive";
}
}
}
window.onload = color;
全部代码：
代码如下:
双色表格
function color() {
//把表头设为紫色
var th = document.getElementById("th");
th.style.background = "violet"
//1.得到所有
元素
var trs = document.getElementsByTagName("tr");
var i;
for(i = 1; i //2.改变元素的背景颜色
if(i % 2 == 0) {
trs[i].style.background = "yellow";
} else {
trs[i].style.background = "olive";
}
}
}
window.onload = color;
姓名 |
科目 |
成绩 |
张三 |
语文 |
90 |
张三 |
数学 |
87 |
李四 |
数学 |
68 |
王五 |
英语 |
76 |
JS实现双色表格实现代码_javascript技巧
JS实现双色表格实现代码_javascript技巧:原理其实很简单：利用getElementsByTagName得到所有的元素，然后分别为奇数项和偶数项的元素添加背景颜色。 核心代码： 代码如下: function color() { //把表头设为紫色 var th = document.getElementById(th); th.style
Top
