JavaWeb03-HTML篇笔记（五）

• 获得到控制的表格元素:
  • var tab1 = document.getElementById(“tab1”);
  • var len = tab1.rows.length;
    1.1.2.2 步骤分析：
    【步骤一】创建一个HTML页面：可以使用后台设计页面.
    【步骤二】确定事件：onload事件.
    【步骤三】触发一个函数.在这个函数中获得操作的表格.
    【步骤四】获得表格中的所有的行数.
    【步骤五】遍历表格的行数.
    【步骤六】判断是否是奇数行还是偶数行.
    1.1.3 代码实现：

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";
}
}
}

1.1.4 总结：1.1.4.1 表格中的tbody和thead标签

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";
}
}
}

JavaWeb03-HTML篇笔记（五）

原文：http://blog.51cto.com/13517854/2112663