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 模式设计之工厂模式学习心得
Apr 27 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
Dec 07 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
Jquery Fade用法详解
Nov 06 jQuery
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中的观察者模式简单实例
2015/01/20 PHP
php输出xml属性的方法
2015/03/19 PHP
PHP实现上传文件并存进数据库的方法
2015/07/16 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
php微信公众号开发(2)百度BAE搭建和数据库使用
2016/12/15 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
splice slice区别
2006/10/09 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
2016/01/08 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
2016/06/12 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
js实现拖拽上传图片功能
2017/08/01 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
jQuery选择器之基本过滤选择器用法实例分析
2019/02/19 jQuery
python简单程序读取串口信息的方法
2015/03/13 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python Django框架url反向解析实现动态生成对应的url链接示例
2019/10/18 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
python中什么是面向对象
2020/06/11 Python
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
syb养殖创业计划书
2014/01/09 职场文书
管理失职检讨书
2014/02/12 职场文书
信息管理应届生求职信
2014/03/07 职场文书
阳光体育活动总结
2014/04/30 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB