JavaWeb03-HTML篇笔记（五）

最新推荐文章于 2021-06-17 11:45:45 发布

czbkzmj

最新推荐文章于 2021-06-17 11:45:45 发布

阅读量119

点赞数

分类专栏： JAVA

本文链接：https://blog.csdn.net/czbkzmj/article/details/80361754

版权

JAVA 专栏收录该内容

476 篇文章 1 订阅

订阅专栏

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