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 相关文章推荐
推荐20家国外的脚本下载网站
Apr 28 Javascript
dotopAlert 提示用户需安装播放器的代码
Sep 17 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
Sep 07 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 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 Smarty 字符比较代码
2011/02/27 PHP
提高PHP编程效率的方法
2013/11/07 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
用js实现计算加载页面所用的时间
2010/04/02 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python 中split 和 strip的实例详解
2017/07/12 Python
浅析Git版本控制器使用
2017/12/10 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
基于python实现坦克大战游戏
2020/10/27 Python
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
工艺工程师工作职责
2013/11/23 职场文书
施工材料员岗位职责
2014/02/12 职场文书
工作会议主持词
2014/03/17 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
python 解决微分方程的操作(数值解法)
2021/05/26 Python
聊聊Python String型列表求最值的问题
2022/01/18 Python