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开源框架-jQuery使用手册(1)
Mar 10 Javascript
JavaScript定义类或函数的几种方式小结
Jan 09 Javascript
jquery调用asp.net 页面后台的实现代码
Apr 27 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
原生JS进行前后端同构
Apr 22 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
js前端对于大量数据的展示方式及处理方法
Dec 02 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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
python tornado使用流生成图片的例子
2019/11/18 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
CSS+jQuery+PHP+MySQL实现的在线答题功能
2015/04/25 HTML / CSS
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
机械设计职业生涯规划书
2013/12/27 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
2014年国庆晚会主持词
2014/09/19 职场文书
医院见习报告范文
2014/11/03 职场文书
北京英文导游词
2015/02/12 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL