JS动态增加删除行

利用html的特性实现动态增加删除行，一下是JS函数代码。

// 用于增加行的时候参照隐藏的row
function addRow2(tbodyName, hiddenTbodyName){
// Get the tbody
var orgBody = document.getElementById(tbodyName);
var recordRowCount=orgBody.rows.length;
var hiddenBody = document.getElementById(hiddenTbodyName)
//var firstRow = orgBody.rows[0];
var firstRow = hiddenBody.rows[0];
var newRow = firstRow.cloneNode(true);

// Call function to general the new ID
var newID = shiftID(firstRow.id, orgBody.rows.length + 1)
// Set the row's ID
newRow.id = newID;

// add the new row
orgBody.appendChild(newRow);

// Reset the item status
resetRow(newRow);

// Reset the item number for this page only
resetItemNum(orgBody);
}
// 参照第一行来增加
function addRow(tbodyName){
// Get the tbody
var orgBody = document.getElementById(tbodyName);
var recordRowCount=orgBody.rows.length;
var firstRow = orgBody.rows[0];
var newRow = firstRow.cloneNode(true);

// Call function to general the new ID
var newID = shiftID(firstRow.id, orgBody.rows.length + 1)
// Set the row's ID
newRow.id = newID;

// add the new row
orgBody.appendChild(newRow);

// Reset the item status
resetRow(newRow);

// Reset the item number for this page only
resetItemNum(orgBody);
}

// Reset the input field value
function resetRow(obj){
var items = obj.childNodes;
//alert(items.length);
for (var m = 0; m < items.length; m ++){
// loop the elements of object
if (items[m].childNodes.length > 0){
resetRow(items[m]);
}

if (items[m] != undefined && items[m].type != undefined){
if (items[m].type == "select-one"){
items[m].selectIndex = -1;
items[m].value="";
}else if (items[m].type == "radio"){
// pass
//items[m].id = shiftID(items[m].id, newIndex);
}else if (items[m].type == "text"){
// Empty input text
items[m].value = "";
}else if (items[m].type == "hidden"){
// Empty input text
items[m].value = "";
}else if (items[m].type == "checkbox"){
// Empty input text
items[m].checked = false;
}else{
break;
}
}
}
}

function resetItemNum(tbody){
var item
for (var i = 0; i < tbody.rows.length; i ++){
item = tbody.rows[i].cells[1];
item.innerHTML = (i + 1);
}
}

// General the new ID
function shiftID(oldID, rowNum){
var newNum = "0" + rowNum;
// Split the last two characters
newNum = newNum.slice(newNum.length - 2, newNum.length)
return oldID.slice(0, oldID.length - 2) + newNum;
}

// Delete the selected row
function deleteRow(bodyName){
var tbody = document.getElementById(bodyName);
if (tbody == null){
return;
}

// loop the rows
for (var i = tbody.rows.length - 1; i >= 0 ; i --){
// selected row
if (rowSelected(tbody.rows[i])){
// delete the selected row if it has more than one row
if (tbody.rows.length > 1){
// remove the selected row
tbody.removeChild(tbody.rows[i]);
}else{
// reset the last row
resetRow(tbody.rows[i]);
}
}
}

// reset the item number
resetItemNum(tbody);
}

// check the special row is selected
function rowSelected(row){
var firstCell = row.cells[0];
var child = null;
for (var i = 0; i < firstCell.childNodes.length; i ++){
child = firstCell.childNodes[i];
if (child.type != undefined && child.type.toString() == "checkbox"){
return firstCell.childNodes[i].checked;
}
}
return false;
}