纯js实现隔行变色效果

 更新时间:2017年11月29日 16:10:21   作者:snow_1  
这篇文章主要为大家详细介绍了纯js实现隔行变色效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

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

相关文章

  • js contains方法实现代码

    js contains方法实现代码

    IE有许多好用的方法,后来都被其他浏览器抄袭了,比如这个contains方法。如果A元素包含B元素,则返回true,否则false。唯一不支持这个方法的是IE的死对头firefox。
    2011-01-01
  • 一些相见恨晚的 JavaScript 技巧

    一些相见恨晚的 JavaScript 技巧

    本文从7个方面讲述 JavaScript 中那些你不很熟知但非常实用的技巧。
    2010-04-04
  • JS函数重载的解决方案

    JS函数重载的解决方案

    在面向对象的编程中,很多语言都支持函数重载,能根据函数传递的不同个数、类型的参数来做不同的操作,JS对它却不支持,需要我们额外做些小动作。
    2014-05-05
  • JavaScript实现动态添加Form表单元素的方法示例

    JavaScript实现动态添加Form表单元素的方法示例

    这篇文章主要介绍了JavaScript实现动态添加Form表单元素的方法,结合实例形式分析了javascript表单元素操作相关函数使用方法与相关注意事项,需要的朋友可以参考下
    2017-08-08
  • 微信开发相关功能之使用微信JS-SDK接口

    微信开发相关功能之使用微信JS-SDK接口

    这篇文章主要给大家介绍了关于微信开发相关功能之使用微信JS-SDK接口的相关资料,微信SDK是一套开发工具包,为开发者提供了许多API接口,使得开发一个微信公众号变得更加简单,需要的朋友可以参考下
    2023-12-12
  • Bootstrap Paginator分页插件使用方法详解

    Bootstrap Paginator分页插件使用方法详解

    这篇文章主要为大家详细介绍了Bootstrap Paginator分页插件使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 使用onbeforeunload属性后的副作用

    使用onbeforeunload属性后的副作用

    使用onbeforeunload属性后的副作用...
    2007-03-03
  • JS组件Bootstrap按钮组与下拉按钮详解

    JS组件Bootstrap按钮组与下拉按钮详解

    这篇文章主要为大家介绍了JS组件Bootstrap按钮组与下拉按钮的相关资料,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 详解JavaScript实现监听路由变化

    详解JavaScript实现监听路由变化

    前端实现路由变化主要有两种方式,本文主要介绍了这两种方法的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JS可视化学习向量计算点到线段的距离并展示

    JS可视化学习向量计算点到线段的距离并展示

    这篇文章主要为大家介绍了JS可视化学习向量计算点到线段的距离并展示实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12

最新评论