纯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 相关文章推荐
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
jQuery继承extend用法详解
Oct 10 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
php图片裁剪函数
2018/10/31 PHP
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
Javascript中this关键字的一些小知识
2015/03/15 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
2016/12/16 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
JavaScript Math对象和调试程序的方法分析
2019/05/13 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
html-webpack-plugin修改页面的title的方法
2020/06/18 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python安装pil库方法及代码
2019/06/25 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
关于keras.layers.Conv1D的kernel_size参数使用介绍
2020/05/22 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
2014年公司庆元旦活动方案
2014/03/05 职场文书
三年级评语大全
2014/04/23 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
社区灵活就业证明
2014/11/03 职场文书
创业计划书之农家乐
2019/10/09 职场文书