Dynamically add and delete rows and JavaScript tables based on javascript

Dynamically add and delete rows and JavaScript tables based on javascript

Another dynamic control table effect, using JavaScript to dynamically generate table rows and table columns, as well as dynamically Delete these columns and rows. After running the code, click the corresponding function button, you can perform table operations.

1. jsp

<Table id = "viewTabs"> <thead> <tr> <th> product name </th> <th> NO. </th> <th> quantity </th> <th> weight </th> <th> operation </th> </tr> </thead> <tbody> <tr> <td> <input name = "productName" type = "text"> </td> <input name = "productNumber" type = "text"> </td> <input name = "quantity" type = "text"> </td> <input name = "weight" type = "text"> </td> </tr> </tbody> </table> <button type = "button" onclick = "addTable (); "style =" margin-left: 750px; "> Add row </button>

2. js

// Add the row function addTable () {var tab = document. getElementById ("viewTabs"); // obtain the table var colsNum = tab. rows. item (0 ). cells. length; // Number of columns in the table // current number of rows in the table var num = document. getElementById ("viewTabs "). rows. length; var rownum = num; tab. insertRow (rownum); for (var I = 0; I <4; I ++) {tab. rows [rownum]. insertCell (I); // Insert the column if (I = 0) {tab. rows [rownum]. cells [I]. innerHTML = '<input name = "productName" type = "text"/>';} else if (I = 1) {tab. rows [row Num]. cells [I]. innerHTML = '<input name = "productNumber" type = "text"/>';} else if (I = 2) {tab. rows [rownum]. cells [I]. innerHTML = '<input name = "quantity" type = "text"/>';} else {tab. rows [rownum]. cells [I]. innerHTML = '<input name = "weight" type = "text"/>';} tab. rows [rownum]. insertCell (I); tab. rows [rownum]. cells [I]. innerHTML = '<a href = "#" onclick = "delRow (this)"> delete a row </a>';} // delete a row function delRow (obj) {var Row = obj. parentNode ; Var Row = obj. parentNode; // trwhile (Row. tagName. toLowerCase ()! = "Tr") {Row = Row. parentNode;} Row. parentNode. removeChild (Row); // Delete Row}

The above is a small Editor to share with you the JavaScript Implementation of Dynamic addition and deletion of table rows, I hope to help you.

Articles you may be interested in:

• Dynamic addition of table rows using javascript
• Dynamically add and delete table rows using javascript (compatible with IE/FF)
• Js dynamically adds table rows without refreshing [strongly recommended by the customer's house]
• JavaScript dynamic addition of table rows using templates and tags
• How does javascript dynamically load tables and dynamically add table rows?
• Add and delete table row js implementation code dynamically
• Native JS and JQuery dynamic addition and deletion of table rows