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 相关文章推荐
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
js实现的简单radio背景颜色选择器代码
Aug 18 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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+ajax实时聊天室
2016/07/20 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
python执行等待程序直到第二天零点的方法
2015/04/23 Python
深入理解python中的atexit模块
2017/03/07 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
python tornado微信开发入门代码
2018/08/24 Python
python flask安装和命令详解
2019/04/02 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
Python socket服务常用操作代码实例
2020/06/22 Python
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
学生手册家长评语
2014/02/10 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
护校行动方案
2014/05/31 职场文书
公务员检讨书
2014/11/01 职场文书
写给同学的新学期寄语
2015/02/27 职场文书
运动与健康自我评价
2015/03/09 职场文书
自我检讨书怎么写
2015/05/07 职场文书
56句经典英文座右铭
2019/08/09 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
小程序实现文字循环滚动动画
2021/06/14 Javascript
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python