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 相关文章推荐
JS array 数组详解
Mar 22 Javascript
Javascript中arguments对象详解
Oct 22 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
Angular使用$http.jsonp发送跨站请求的方法
Mar 16 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 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
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
PHP5中MVC结构学习
2006/10/09 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
php取出数组单个值的方法
2018/03/12 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
使用jquery.qrcode.js生成二维码插件
2016/10/17 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
2017/07/12 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
Python实现在Linux系统下更改当前进程运行用户
2015/02/04 Python
python中requests小技巧
2017/05/10 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Python gevent协程切换实现详解
2020/09/14 Python
python 从list中随机取值的方法
2020/11/16 Python
AmazeUI 平滑滚动效果的示例代码
2020/08/20 HTML / CSS
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
生产部厂长助理职位说明书
2014/03/03 职场文书
《东方明珠》教学反思
2014/04/20 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
高中教师个人总结
2015/02/10 职场文书
员工给公司的建议书
2019/06/24 职场文书