纯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图片实时加载提供网页打开速度
Sep 11 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
js判断日期时间有效性的方法
Oct 24 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
详解原生js实现offset方法
Jun 15 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
ES7之Async/await的使用详解
Mar 28 Javascript
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
Apr 09 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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
phpwind中的数据库操作类
2007/01/02 PHP
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php读取纯真ip数据库使用示例
2014/01/26 PHP
php实现删除指定目录下相关文件的方法
2014/10/20 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
基于JavaScript代码实现pc与手机之间的跳转
2015/12/23 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
Django Channels 实现点对点实时聊天和消息推送功能
2019/07/17 Python
django 中QuerySet特性功能详解
2019/07/25 Python
python编写计算器功能
2019/10/25 Python
如何使用repr调试python程序
2020/02/28 Python
python 弧度与角度互转实例
2020/04/15 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
以太网Ethernet IEEE802.3
2013/08/05 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
司仪主持词两篇
2014/03/22 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
Mysql中@和@@符号的详细使用指南
2022/06/05 MySQL