js04 表格隔行换色的案例

案例3-隔行换色
需求:
一个表格,隔一行换一个色
技术分析:
事件:onload  什么时候变色 表格加载完后变色 //页面加载成功


获取元素:dom操作
///////////////
获取元素:
document.getElementById("id"):通过id获取一个元素

//1.获取所有的tr标签
document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)返回一个数组
Array:?数组吗?


常用属性:
length:数组的长度
////////////////////////
步骤分析:
1.html表格一加载的时候 确定事件 onload 
2.编写函数
a.获取元素(所有的tr元素)
b.操作(若当前行是偶数的话加一个样式,若是奇数的话,加另一个样式)
////////
//页面加载成功
onload=function(){
//1.获取所有的tr
var arr=document.getElementsByTagName("tr");//数组类型 可以省去     

数组引用类型:var myArray=new Array()

 
//alert(arr);
//alert(arr.length);

//2.判断奇偶数 添加不同的样式 遍历数组
for(var i=1;i<arr.length;i++){
if(i%2==0){
arr[i].style.backgroundColor="#FFFFCC"; //设置每一行的  css的 属性 样式 标签的style属性
}else{
arr[i].style.backgroundColor="#BCD68D";
}
}

}
//////////////////////////

posted @   BBS_自律  阅读(453)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示