首页 > 开发 > JS > 正文

纯js实现隔行变色效果

2024-05-06 16:41:09
字体:
来源:转载
供稿:网友

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

<script type="text/javascript"> function createTable(){  //创建表格  var table = document.createElement("table");    //设置表格的行数  for(var i=0;i<4;i++){   var tr = document.createElement("tr");   //设置表格的列数   for( var j=0;j<5;j++){    var td = document.createElement("td");    tr.appendChild(td);    //添加文本    var txt = 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 = "solid 1px red";  table.setAttribute("width","200px");  table.setAttribute("height","100px");      //添加到body中  document.body.appendChild(table);     }//create table over  createTable();</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表