纯js实现隔行变色效果


Posted in Javascript onNovember 29, 2017

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

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

Javascript 相关文章推荐
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
Jul 23 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
浅谈JavaScript中的属性:如何遍历属性
Sep 14 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
详解Element 指令clickoutside源码分析
Feb 15 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 #Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 #Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 #Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 #Javascript
Angular2管道Pipe及自定义管道格式数据用法实例分析
Nov 29 #Javascript
node.js支持多用户web终端实现及安全方案
Nov 29 #Javascript
Angular4的输入属性与输出属性实例详解
Nov 29 #Javascript
You might like
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
php正则表达式学习笔记
2015/11/13 PHP
破解Session cookie的方法
2006/07/28 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
Python 中Pickle库的使用详解
2018/02/24 Python
python的常见矩阵运算(小结)
2019/08/07 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
费用会计岗位职责
2014/01/01 职场文书
法务专员岗位职责
2014/01/02 职场文书
党员公开承诺书范文
2014/03/25 职场文书
赔偿协议书范本
2014/04/15 职场文书
八项规定整改方案
2014/10/01 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
2016年会开场白台词
2015/06/01 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
长辈生日祝福语大全(72句)
2019/08/09 职场文书
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL