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 相关文章推荐
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
Js面试算法详解
Apr 08 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
Oct 19 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
基于mysql的论坛(3)
2006/10/09 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
基于jQuery试卷自动排版系统
2010/07/18 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
JS实现的tab切换并显示相应内容模块功能示例
2019/08/03 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
在python中实现同行输入/接收多个数据的示例
2019/07/20 Python
python绘制随机网络图形示例
2019/11/21 Python
PyTorch中的C++扩展实现
2020/04/02 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
SmartBuyGlasses美国官网:太阳眼镜和眼镜
2017/08/20 全球购物
Gap工厂店:Gap Factory
2017/11/02 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
Ruby如何创建一个线程
2013/03/10 面试题
大学生学期自我鉴定
2014/03/19 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python
Java界面编程实现界面跳转
2022/06/16 Java/Android