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 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
Vue底层实现原理总结
Feb 17 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 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 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
php实现session共享的实例方法
2019/09/19 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
jQuery中:not选择器用法实例
2014/12/30 Javascript
微信小程序 教程之列表渲染
2016/10/18 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
ES6 Symbol数据类型的应用实例分析
2019/06/26 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
python查询mysql中文乱码问题
2014/11/09 Python
Python中统计函数运行耗时的方法
2015/05/05 Python
python 剪切移动文件的实现代码
2018/08/02 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
华美博弈C/VC工程师笔试试题
2012/07/16 面试题
C++:局部变量能否和全局变量重名
2014/03/03 面试题
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
IBatis持久层技术
2016/07/18 面试题
自荐信如何制作?
2014/02/21 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
公司财务部岗位职责
2015/04/14 职场文书
2016年过年放假安排通知
2015/08/18 职场文书
安全生产协议书
2016/03/22 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书