JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享


Posted in Javascript onJuly 05, 2013
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title>JavaScript</title>
 </head>
 <body>
  <script language="javascript">
   var n = 0;
   function showTable(len) {
    wi('<table border="1" width="300" style="border-collapse:collapse"><tbody id="table">');
    for (i=0;i<len;i++) {
     if (parseInt(i%2)==1) {
      bg = '#F4FAC7';
     } else {
      bg = 'white'; 
     }
     wi('<tr bgcolor='+bg+'><td>第'+(i+1)+'行</td></tr>'); 
    }
    wi('</tbody></table><br />');
    wi('<input type="button" value="Add" id="add" />'); 
   }
   function wi(str) {
    return document.write(str); 
   }
   showTable(10);
   var add = document.getElementById("add");
   add.onclick = function() {
    n = n+1;
    if (n%2==0) {
     bg = '#F4FAC7';
    } else {
     bg = 'white'; 
    }
    var table = document.getElementById("table");
    var tr = document.createElement("tr");
    tr.bgColor = bg;
    var td = document.createElement("td");
    td.innerHTML = '第'+(10+n)+'行';
    tr.appendChild(td);
    table.appendChild(tr);
   }
        </script>
 </body>
</html>   
Javascript 相关文章推荐
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
关于query Javascript CSS Selector engine
Apr 12 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
实例详解jQuery结合GridView控件的使用方法
Jan 04 Javascript
js实现商品抛物线加入购物车特效
Nov 18 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 #Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 #Javascript
基于JavaScript 下namespace 功能的简单分析
Jul 05 #Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 #Javascript
js文件缓存之版本管理详解
Jul 05 #Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 #Javascript
把input初始值不写value的具体实现方法
Jul 04 #Javascript
You might like
PHP 文件上传进度条的两种实现方法的代码
2007/11/25 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP图片处理之使用imagecopy函数添加图片水印实例
2014/11/19 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
jquery中选择块并改变属性值的方法
2013/07/31 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
javascript版2048小游戏
2015/03/18 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
JavaScript数据结构之链表的实现
2017/03/19 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
Django接收自定义http header过程详解
2019/08/23 Python
解决Python二维数组赋值问题
2019/11/28 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Python实现仿射密码的思路详解
2020/04/23 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
关于VPN
2012/06/10 面试题
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
上班早退检讨书
2014/01/09 职场文书
五分钟演讲稿
2014/04/30 职场文书
三月雷锋月活动总结
2014/07/03 职场文书
户籍证明书标准模板
2014/09/10 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题