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 相关文章推荐
从零开始学习jQuery (二) 万能的选择器
Oct 01 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
js实现车辆管理系统
Aug 26 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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
模拟xcopy的函数
2006/10/09 PHP
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php 随机生成10位字符代码
2009/03/26 PHP
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
PHP实现的迷你漂流瓶
2015/07/29 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
非常强大的 jQuery.AsyncBox 弹出对话框插件
2011/08/29 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
SVG动画vivus.js库使用小结(实例代码)
2017/09/14 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
2019/06/10 Javascript
python实现红包裂变算法
2016/02/16 Python
python一键升级所有pip package的方法
2017/01/16 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
python英语单词测试小程序代码实例
2019/09/09 Python
关于python 跨域处理方式详解
2020/03/28 Python
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
自考毕业自我鉴定范文
2013/10/27 职场文书
餐厅总经理岗位职责
2013/12/31 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
2014全国两会心得体会
2014/03/17 职场文书
经典促销广告词大全
2014/03/19 职场文书
2015年八一建军节演讲稿
2015/03/19 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
压缩Redis里的字符串大对象操作
2021/06/23 Redis