利用 jQuery Clone 复制行

来源:未知 责任编辑:责任编辑 发表时间:2013-12-18 11:35 点击:
最近客串了一把前端,有行复制的功能用 jQuery 来实现了。感觉比以前原生js用 CreateElement 要简单多了,但还是遇到了一些陷阱比如IE7的bug,这里记录下来。先看看 table 的样子:这里3行是一组,按下"Copy"连值复制,按下"Add"只增加行不复制值。calendar 使用的是 jQuery UI 里的 datepicker
下图只是一个简单的demo,没有复杂的样式表:

\

为了灵活对应不同的表格,提取了一个共通的 js 来处理,作为使用前提:
1. table 必须有 id;
2. 有 id 的 tr 才会被复制;(tr的id从1开始编号)
3. table 内所有id都必须以 xxx_n 编号


[javascript] function RowCopyUtility(opts) { 
  // 表格Id  
  this.tableId = opts.tableId; 
  // 分组内有多少行  
  this.rowGroupNumber = opts.rowGroupNumber; 
  // 一组内Button对应的方法Map(key=Button value, value=对应方法名)  
  // 所有方法都应以 function (idx) 方式调用  
  this.buttonHandlers = opts.buttonHandlers; 
   
  this._countForRowsGroup = -1; 
  this._keyForRow = -1; 
 
  this.getTargetRowGroup = function(groupIdx) { 
 
    var rows = []; 
    if (groupIdx > 0) { 
      for(var i=1; i<this.rowGroupNumber+1; i++) { 
        rows[i-1] = $("#row" + i + "_" + groupIdx); 
      } 
    } else { 
      for(var i=0; i<this.rowGroupNumber; i++) { 
        rows[i] = $("#" + this.tableId + " tr[id]").eq(i); 
      } 
    } 
    return rows; 
  }; 
 
  this.addRow = function (groupIdx, needCopyValue) { 
 
    if (this._countForRowsGroup == -1) { 
      this._countForRowsGroup = ($("#" + this.tableId + " tr[id]").length - 1)/this.rowGroupNumber; 
      this._keyForRow =  parseInt($("#" + this.tableId + " tr[id]:not(#row_add):last").attr("id").split("_")[1]) + 1; 
    } 
 
    if (groupIdx == 0) { 
      var firstRow = $("#" + this.tableId + " tr[id]:first"); 
      var currentIdx = firstRow.attr("id").split("_")[1]; 
      groupIdx = currentIdx; 
    } 
 
    var regForId = new RegExp("^(\\w+_)" + groupIdx + "$"); 

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码:点击我更换图片
最新评论 更多>>

推荐热点

  • Gb2312转utf-8编码的方法(vbs+js)
  • 如何使用Ajax技术开发Web应用程序(1)
  • js跳转路径问题
  • JavaScript模仿桌面窗口
  • 用js检测两个线段是否相交
  • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
  • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
  • 我是如何去了解jquery的(六),案例之幻灯片轮换
  • Jquery封装幻灯片效果
网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
Copyright © 2008-2015 计算机技术学习交流网. 版权所有

豫ICP备11007008号-1