js-dynamically inserting and deleting rows for table

createtime--2017 April 15 08:09:43author:marydonjs-dynamically insert, delete table rows using the InsertRow () and DeleteRow () Methods of table

<inputID= "UserName"type= "button"value= "Add Line"onclick= "InsertRow ();"/><inputID= "UserName"type= "button"value= "Delete Line 1"onclick= "delrow ();"/><inputID= "UserName"type= "button"value= "Delete Line 3"onclick= "delRow3 ();"/><TableID= "Testtab"Border= "1"style= "Border-collapse:collapse;"width= "99%">    <TR>        <TD>A1</TD>        <TD>A2</TD>        <TD>A3</TD>    </TR></Table>

1. Insert Rows Dynamically

/** * Insert a row after the last TR*/functionInsertRow () {varTable = document.getElementById ("Testtab"); varNewRow = Table.insertrow (-1);//new row (last row)    varNEWCELL1 = Newrow.insertcell (0);//first columnnewcell1.innerhtml = "B1"; varNewCell2 = Newrow.insertcell (1);//Second Cellnewcell2.innerhtml = "B2"; varNewCell3 = Newrow.insertcell (2);//a third cellnewcell3.innerhtml = "B3"; Newrow.insertcell (3). InnerHTML = "<input type= ' button ' value= ' delete line 2 ' onclick= ' DelRow2 (this); ' /> "}

2. Delete Rows

/** *function  delrow (    ) {var table = document.getElementById (" Testtab ");     var lastrowindex = table.rows.length-1; // index value of the last TR     Table.deleterow (lastrowindex);    }

/* * * Delete the specified line * @param {Object} rowIndex         * */ function DelRow2 (inputobj) {    var trobj = inputObj.parentNode.parentNode;     var rowIndex = trobj.rowindex;     var table = Trobj.parentnode;    Table.deleterow (RowIndex);}

/** * There are no parameters can be * @param {Object} obj*/functiondelRow3 (obj) {varTableobj =NULL; varRowIndex =-1; if(obj) {tableobj=Obj.parentNode.parentNode.parentNode; RowIndex=Obj.parentNode.parentNode.rowIndex; } Else{tableobj= document.getElementById ("Testtab"); RowIndex= Tableobj.rows.length-1;        } tableobj.deleterow (RowIndex); }

js-dynamically inserting and deleting rows for table