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 相关文章推荐
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
node.js中watch机制详解
Nov 17 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
AngularJS 异步解决实现方法
Jun 12 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
在小程序开发中使用npm的方法
Oct 17 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
解决vue admin element noCache设置无效的问题
Nov 12 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[02:08]2018年度CS GO枪械皮肤设计大赛优秀作者-完美盛典
2018/12/16 DOTA
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
从Python的源码来解析Python下的freeblock
2015/05/11 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
详解Python pygame安装过程笔记
2017/06/05 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
Python3.5迭代器与生成器用法实例分析
2019/04/30 Python
wxPython实现整点报时
2019/11/18 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
美国体育用品在线:Modell’s Sporting Goods
2018/06/07 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
百度JavaScript笔试题
2015/01/15 面试题
趣味活动策划方案
2014/02/08 职场文书
企业文化标语口号
2014/06/09 职场文书
阿甘正传观后感
2015/06/01 职场文书
2016最新离婚协议书范本及程序
2016/03/18 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书