黑马程序员技术交流社区

标题: 【郑州校区】JavaWeb03-HTML篇笔记（五） [打印本页]

作者: 谷粒姐姐 时间: 2018-5-3 15:30
标题: 【郑州校区】JavaWeb03-HTML篇笔记（五）
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 代码实现：

[AppleScript] 纯文本查看 复制代码

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.style.backgroundColor = "#00FF00";

}else{

// 奇数行

tab1.rows.style.backgroundColor = "#00FFFF";

}

}

}

1.1.4 总结：1.1.4.1 表格中的tbody和thead标签
[AppleScript] 纯文本查看 复制代码
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.style.backgroundColor = "green";
}else{
tab1.tBodies[0].rows.style.backgroundColor = "gold";
}
}
}
JavaWeb01-HTML篇笔记（一）
JavaWeb01-HTML篇笔记（二）
JavaWeb01-HTML篇笔记（三）
JavaWeb01-HTML篇笔记（四）

JavaWeb01-HTML篇笔记（五）
JavaWeb02-HTML篇笔记（一）
JavaWeb02-HTML篇笔记（二）
JavaWeb02-HTML篇笔记（三）
JavaWeb03-HTML篇笔记（一）
JavaWeb03-HTML篇笔记（二）
JavaWeb03-HTML篇笔记（三）
JavaWeb03-HTML篇笔记（四）

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2