微客导航 » 文章资讯 » 纯js实现隔行变色效果

纯js实现隔行变色效果

2023-09-20 06:49:05 294

本文实例为大家分享了js实现隔行变色的具体代码，供大家参考，具体内容如下


functioncreateTable(){
//创建表格
vartable=document.createElement("table");

//设置表格的行数
for(vari=0;i<4;i++){
vartr=document.createElement("tr");
//设置表格的列数
for(varj=0;j<5;j++){
vartd=document.createElement("td");
tr.appendChild(td);
//添加文本
vartxt=document.createTextNode("wkk");
td.appendChild(txt);
}

//判断颜色的变换
if(i%2==0){
//添加属性（第一种）
tr.style.backgroundColor="#f0f";
}else{
tr.style.backgroundColor="#ff0";
}

table.appendChild(tr);
}

//添加属性（第二种）
table.setAttribute("border","1px");
//table.style.border="solid1pxred";
table.setAttribute("width","200px");
table.setAttribute("height","100px");


//添加到body中
document.body.appendChild(table);


}//createtableover

createTable();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

纯js实现隔行变色效果

热门推荐

随机推荐