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代码
Jun 27 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
Feb 07 Javascript
php对mongodb的扩展(初识如故)
Nov 11 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
Jquery实现纵向横向菜单
Jan 24 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
Javascript实现鼠标移入方向感知
Jun 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
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
基于JQuery的一句代码实现表格的简单筛选
2010/07/26 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
10条建议帮助你创建更好的jQuery插件
2015/05/18 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
js 获取本地文件及目录的方法(推荐)
2016/11/10 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
python实现用于测试网站访问速率的方法
2015/05/26 Python
OpenCV实现人脸识别
2017/04/07 Python
python实现二分查找算法
2017/09/21 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
python实现最小二乘法线性拟合
2019/07/19 Python
Python 日期与时间转换的方法
2020/08/01 Python
python中Django文件上传方法详解
2020/08/05 Python
通过实例解析python and和or使用方法
2020/11/14 Python
椰子猫砂:CatSpot
2018/08/27 全球购物
应届生自荐信范文
2014/02/21 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
设计大赛策划方案
2014/06/13 职场文书
教师师德考核自我评价
2014/09/13 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
承诺书应该怎么写?
2019/09/10 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
OpenFeign实现远程调用
2022/08/14 Java/Android