JS增加行复制行删除行的实现代码


Posted in Javascript onNovember 09, 2013
var customerInfoMethod ={  
//复制增加行  
copyrow:function(obj,id)  
{  
var rowIndex=obj.parentNode.parentNode.rowIndex;  
var resrow=document.getElementById(id);  
rowIndex--;  
var newRow=resrow.cloneNode(true);//document.createElement("tr");  
var parent = resrow.parentNode;  
   if(parent.lastChild == resrow){  
   //如果targetElement是parent最后一个子元素,插入newElement  
   parent.appendChild(newRow);  
  }else{  
  //如果不是,插入到targetElement下一个兄弟节点的前面  
   parent.insertBefore(newRow, resrow.nextSibling);  
  }  //newRow.innerHTML=resrow.innerHTML;  
var selectObj = newRow.getElementsByTagName("select");  
for(var a=0;a<selectObj.length;a++){  
selectObj[a].options[0].selected=true;  
}  
var inputObj = newRow.getElementsByTagName("input");  
inputObj[0].style.display="";  
inputObj[1].style.display="none";  
},  
//复制增加行  
copyrowUpdate:function(obj,id)  
{  
var rowIndex=obj.parentNode.parentNode.rowIndex;   
var resrow=document.getElementById(id);  
rowIndex--;  
var newRow=resrow.cloneNode(true);//document.createElement("tr");  
var parent = resrow.parentNode;  
   if(parent.lastChild == resrow){  
   //如果targetElement是parent最后一个子元素,插入newElement  
   parent.appendChild(newRow);  
  }else{  
  //如果不是,插入到targetElement下一个兄弟节点的前面  
   parent.insertBefore(newRow, resrow.nextSibling);  
  }  
//newRow.innerHTML=resrow.innerHTML;  
var selectObj = newRow.getElementsByTagName("select");  
for(var a=0;a<selectObj.length;a++){  
selectObj[a].options[0].selected=true;  
}  
var inputObj = newRow.getElementsByTagName("input");  
for(var i=0;i<inputObj.length-2;i++){  
inputObj[i].value="0";  
}  
inputObj[inputObj.length-2].style.display="";  
inputObj[inputObj.length-1].style.display="none";  
},  
//删除行  
deleteRow:function(rootId,obj) {  
var rootTable = $(rootId);  
rootTable.deleteRow(obj.parentNode.parentNode.rowIndex);  
  }  
}  

/**  
 增加行 fanjf  
*/  
function addRow(tableId,trId){  
var tableObj = document.getElementById(tableId);  
var trObj = document.getElementById(trId);  
//var trIndex = trObj.rowIndex+1;  
var rows = tableObj.rows.length;  
var cell = "";  
var tr = tableObj.insertRow(rows);  
for(i=0;i<trObj.cells.length;i++){  
 cell= tableObj.rows(rows).insertCell(i);  
 cell.innerText= trObj.cells(i).innerText;  
 cell.className= trObj.cells(i).className;  
 cell.innerHTML= trObj.cells(i).innerHTML;  
}  
}  
/**  
 删除行 fanjf  
*/  
function deleteRow(tableId,trId){  
    var tableObj = document.getElementById(tableId);  
    var trObj = document.getElementById(trId);  
    //var trIndex = trObj.rowIndex;//复制tr的行号  
    var rows = tableObj.rows.length;  
    if(rows>0){  
    tableObj.deleteRow(rows-1);  
    }else{  
        alert("无可删除的卡号信息!");  
    }  
} 
Javascript 相关文章推荐
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
Javascript之面向对象--封装
Dec 02 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
详解vue2.0 transition 多个元素嵌套使用过渡
Jun 19 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
JavaScript 判断数据类型的4种方法
Sep 11 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 #Javascript
js实现简单登录功能的实例代码
Nov 09 #Javascript
ExtJS实现文件下载的方法实例
Nov 09 #Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 #Javascript
5分钟理解JavaScript中this用法分享
Nov 09 #Javascript
Mac地址验证的javascript代码
Nov 09 #Javascript
详解jquery uploadify 上传文件
Nov 09 #Javascript
You might like
php设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
PHP实现的日历功能示例
2018/09/01 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
dojo 之基础篇
2007/03/24 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
jQuery如何取id有.的值一般的方法是取不到的
2014/04/18 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
vue 设置路由的登录权限的方法
2018/07/03 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
Jquery让form表单异步提交代码实现
2019/11/14 jQuery
微信小程序调用wx.getImageInfo遇到的坑解决
2020/05/31 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
Python3中列表list合并的四种方法
2019/04/19 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
DataList 能否分页,请问如何实现?
2015/05/03 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
跟单文员的岗位职责
2013/11/14 职场文书
一年级家长会邀请函
2014/01/25 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP