js给table自动增加行和删除行

给tbody添加ID

<tbody id="fm2_table_body">
 </tbody>

js代码如下:

//添加行
function addNewPersonRow(){
 i=i+1;
 var bodyObj=document.getElementById("fm2_table_body"); 
 bodyObj.style.display = '';
 if(bodyObj==null){
  alert("Body of Table not Exist!"); 
  return;
 }
 var rowCount = bodyObj.rows.length; 
    var newRow = bodyObj.insertRow(rowCount++);   
    var firstCell = newRow.insertCell(0);
    var secondCell = newRow.insertCell(1);
    var thirdCell = newRow.insertCell(2);
    var fourthCell = newRow.insertCell(3);
    var fiveCell = newRow.insertCell(4);
    thirdCell.setAttribute("align","center");
    fourthCell.setAttribute("align","center");
    //var oStyleSheet=document.styleSheets[0];
 //var oRule=oStyleSheet.cssRules[24];
 //oRule.style.textAlign="";
 
    firstCell.innerHTML = "<input type='checkbox' name='ids' value='0'/>";
    secondCell.innerHTML = ""+rowCount+"";
    thirdCell.innerHTML = "<input type='text' onclick='getReceiveFeilds("+i+");' name='receiveChangeItem"+i+"' id='receiveChangeItem"+i+"' readonly=readonly onpaste='return false' style='border: 0 none;width:300px;'/>";
    fourthCell.innerHTML = "<input type='text' onclick='getSendChangeItem("+i+");' name='sendChangeItem"+i+"' id='sendChangeItem"+i+"' readonly=readonly onpaste='return false' style='border: 0 none;width:300px;'/>";
    fiveCell.innerHTML="<input type='button' class='button_ty' value='删除' onclick='removeNewPersonRow(this)'/>" ;
}
//删除行
function removeNewPersonRow(inputobj){ 
    if(inputobj==null) return; 
    //parentNode是父标签的意思,如果你的TD里用了很多div控制格式,要多调用几次parentNode
    var parentTD = inputobj.parentNode;
    var parentTR = parentTD.parentNode; 
    var parentTBODY = parentTR.parentNode; 
    parentTBODY.removeChild(parentTR);
}

你可能感兴趣的:(table行自动添加和删除)