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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
js实现点击图片改变页面背景图的方法
Feb 28 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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中for循环语句的几种变型
2007/03/16 PHP
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
jquery选择器原理介绍($()使用方法)
2014/03/25 Javascript
Json实现异步请求提交评论无需跳转其他页面
2014/10/11 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
vue-cli的webpack模板项目配置文件分析
2017/04/01 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
2017/12/21 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python基于property实现类的特性操作示例
2018/06/15 Python
python 读取竖线分隔符的文本方法
2018/12/20 Python
Python 中由 yield 实现异步操作
2020/05/04 Python
什么是python的必选参数
2020/06/21 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
修理厂厂长岗位职责
2014/01/30 职场文书
医院搬迁方案
2014/06/14 职场文书
音乐教师求职信范文
2015/03/20 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技
一次SQL查询优化原理分析(900W+数据从17s到300ms)
2022/06/10 SQL Server
Redis实现短信验证码登录的示例代码
2022/06/14 Redis