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 相关文章推荐
非阻塞动态加载javascript广告实现代码
Nov 17 Javascript
jQuery阻止同类型事件小结
Apr 19 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
jQuery+ajax读取并解析XML文件的方法
Sep 09 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
详解小程序缓存插件(mrc)
Aug 17 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 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 Imagick获取图片RGB颜色值
2014/07/28 PHP
php微信开发之图片回复功能
2018/06/14 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
2006/09/22 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
2013/10/29 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
浅析jQuery 遍历函数,javascript中的each遍历
2016/05/25 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
web.py获取上传文件名的正确方法
2014/08/26 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
python numpy数组复制使用实例解析
2020/01/10 Python
Django用户身份验证完成示例代码
2020/04/03 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
社区包粽子活动方案
2014/01/21 职场文书
个人查摆剖析材料
2014/02/04 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
yy司仪主持词
2014/03/22 职场文书
春节联欢会策划方案
2014/05/16 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
python如何查找列表中元素的位置
2022/05/30 Python