1.1 案例四：使用JS完成后台数据展示的隔行换色的表格：1.1.1 需求： 在后台展示数据的页面上，通常使用表格标签进行数据的展示.没有背景的表格比较难看的，可以使用JS控制表格的隔行换色. 1.1.2 分析：1.1.2.1 技术分析： 【使用JS获得表格的行数】

  • 获得到控制的表格元素:
    • 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";
}
}
}