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

所属分类: 网络编程 / JavaScript 阅读数: 1774
收藏 0 赞 0 分享

复制代码 代码如下:

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 this关键字指向常用情况解析

这篇文章主要介绍了JavaScript this关键字指向常用情况解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue-cli打包后如何本地查看的操作

这篇文章主要介绍了Vue-cli打包后如何本地查看的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue cli 3.0通用打包配置代码,不分一二级目录

这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JavaScript事件循环及宏任务微任务原理解析

这篇文章主要介绍了JavaScript事件循环及宏任务微任务原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

关于vue-cli3打包代码后白屏的解决方案

这篇文章主要介绍了关于vue-cli3打包代码后白屏的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue打包静态资源后显示空白及static文件路径报错的解决

这篇文章主要介绍了vue打包静态资源后显示空白及static文件路径报错的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue-cli3访问public文件夹静态资源报错的解决方式

这篇文章主要介绍了vue-cli3访问public文件夹静态资源报错的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS继承实现方法及优缺点详解

这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
收藏 0 赞 0 分享

vue或react项目生产环境去掉console.log的操作

这篇文章主要介绍了vue或react项目生产环境去掉console.log的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

这篇文章主要介绍了解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多