JavaScript实现表格动态添加、复制与删除行的完整代码示例

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) {
// 如果目标元素是父节点的最后一个子元素，则直接追加新元素
parent.appendChild(newRow);
} else {
// 如果不是，则插入到目标元素的下一个兄弟节点之前
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) {
// 如果目标元素是父节点的最后一个子元素，则直接追加新元素
parent.appendChild(newRow);
} else {
// 如果不是，则插入到目标元素的下一个兄弟节点之前
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("无可删除的卡号信息！"); 
 } 
}