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";
}
}
}
//////////////////////////
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期