纯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 相关文章推荐
Javascript 汉字字节判断
Aug 01 Javascript
javascript使用isNaN()函数判断变量是否为数字
Sep 21 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
vuejs 单文件组件.vue 文件的使用
Jul 28 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
基于vue实现探探滑动组件功能
May 29 Javascript
Javascript 解构赋值详情
Nov 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
一个可以兼容IE FF的加为首页与加入收藏实现代码
2009/11/02 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
2014/05/04 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
vue项目开启Gzip压缩和性能优化操作
2020/10/26 Javascript
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
Python实现数据库并行读取和写入实例
2017/06/09 Python
python用户管理系统
2018/03/13 Python
python实现大文本文件分割
2019/07/22 Python
python通过http下载文件的方法详解
2019/07/26 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
python实现简单俄罗斯方块
2020/03/13 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
奥巴马就职演讲稿
2014/05/15 职场文书
清洁工岗位职责
2015/02/13 职场文书
个人优缺点总结
2015/02/28 职场文书
工会积极分子个人总结
2015/03/03 职场文书
国王的演讲观后感
2015/06/03 职场文书
仰望星空观后感
2015/06/10 职场文书
详解Spring事件发布与监听机制
2021/06/30 Java/Android