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

 更新时间:2013年11月09日 15:45:47   作者:  
这篇文章介绍了JS增加行复制行删除行的实现代码,有需要的朋友可以参考一下

复制代码 代码如下:

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里绝对用的上的字符分割函数总结

    本节主要介绍了javascript里比较实用的字符分割函数的使用,需要的朋友可以参考下
    2014-07-07
  • 微信小程序数据存储与取值详解

    微信小程序数据存储与取值详解

    这篇文章主要为大家详细介绍了微信小程序数据存储与取值的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01
  • Bootstrap基本组件学习笔记之进度条(15)

    Bootstrap基本组件学习笔记之进度条(15)

    这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • HTML+JS实现爱心动画效果的源码分享

    HTML+JS实现爱心动画效果的源码分享

    最近在热播影剧《点燃我,温暖你》中有个片段是男主人公李峋通过代码实现了一个爱心动画的效果。在本文中,将利用HTML+CSS+JS实现同款效果,需要的可以尝试一下
    2022-11-11
  • 详解 微信小程序开发框架(MINA)

    详解 微信小程序开发框架(MINA)

    小程序使用的是MINA框架,目的是通过简单、高效的方式让开发者可以在微信中开发具有原生App体验的服务。 这篇文章主要介绍了微信小程序开发框架(MINA),需要的朋友可以参考下
    2019-05-05
  • Nginx上传文件全部缓存解决方案

    Nginx上传文件全部缓存解决方案

    Nginx默认会对上传的文件先在本地进行缓存,再转发到应用服务器。请问怎么禁止掉这个缓存,让Nginx只转发而不缓存文件?本文给大家详细介绍Nginx上传文件全部缓存解决方案,有需要的朋友来参考下
    2015-08-08
  • js GridView 实现自动计算操作代码

    js GridView 实现自动计算操作代码

    js操作GridView,实现自动计算的实现代码,下面的代码运行即可
    2009-03-03
  • 理解JavaScript中worker事件api

    理解JavaScript中worker事件api

    这篇文章主要帮助大家理解JavaScript中worker事件api,对worker事件api有一个深刻了解,感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JavaScript实现异步图像上传功能

    JavaScript实现异步图像上传功能

    这篇文章主要介绍了JavaScript实现异步图像上传功能,本文展示了一种使用代码示例立即显示图像的方法(使用图像的Base64编码版本),同时将其上载到服务器,而无需等待操作完成。需要的朋友可以参考下
    2018-07-07
  • JS实现数组内值累加常见的3个方法

    JS实现数组内值累加常见的3个方法

    这篇文章主要给大家介绍了关于JS实现数组内值累加常见的3个方法,文中通过实例代码将3个方法介绍的非常详细,对大家学习或者使用js具有一定参考借鉴价值,需要的朋友可以参考下
    2023-07-07

最新评论