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动态改变select选择变更option的index值示例
Jul 10 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
如何自动化部署项目?折腾服务器之旅~
Apr 16 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
javascript遍历对象的五种方式实例代码
Oct 24 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 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
php生出随机字符串
2017/07/06 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
PHP实现简单的计算器
2020/08/28 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
js中删除数组中的某一元素实例(无下标时)
2017/02/28 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
JavaScript实现网页计算器功能
2020/10/29 Javascript
python 判断自定义对象类型
2009/03/21 Python
Python中GeoJson和bokeh-1的使用讲解
2019/01/03 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
自我评价怎么写正确呢?
2013/12/02 职场文书
技术总监岗位职责
2013/12/05 职场文书
珍惜水资源建议书
2014/03/12 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
会计出纳岗位职责
2015/03/31 职场文书
师范生见习自我总结
2015/06/23 职场文书
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers