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 相关文章推荐
关于图片验证码设计的思考
Jan 29 Javascript
JavaScript null和undefined区别分析
Oct 14 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
JS如何生成动态列表
Sep 22 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页面运行时间的函数介绍
2013/07/01 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
srcElement表格样式
2006/09/03 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
2017/02/21 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
JS变量提升原理与用法实例浅析
2020/05/22 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
python发腾讯微博代码分享
2014/01/10 Python
python安装oracle扩展及数据库连接方法
2017/02/21 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
计算机专业推荐信范文
2013/11/27 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
党的作风建设心得体会
2014/10/22 职场文书
公司给客户的感谢信
2015/01/23 职场文书
健康教育主题班会
2015/08/14 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
Python中的datetime包与time包包和模块详情
2022/02/28 Python