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类 from qq
Nov 13 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
解决Mac安装thrift因bison报错的问题
May 17 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
详解vue 图片上传功能
Apr 30 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
Jan 18 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)
2009/06/02 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
JavaScript中数组的各种操作的总结(必看篇)
2017/02/13 Javascript
JS匹配日期和时间的正则表达式示例
2017/05/12 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
微信小程序选择图片和放大预览图片功能
2017/11/02 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
Angular6使用forRoot() 注册单一实例服务问题
2019/08/27 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
python发腾讯微博代码分享
2014/01/10 Python
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
保护野生动物倡议书
2014/05/16 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
钱学森电影观后感
2015/06/04 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
关于python中模块和重载的问题
2021/11/02 Python
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python