How to dynamically add and delete a table using JavaScript-javascript tutorial

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, the corresponding table operation function can be implemented. Next, we will introduce JavaScript to dynamically add and delete table rows through code examples. For more information about how to dynamically control the table, see, use JavaScript to dynamically generate table rows and table columns, and delete these columns and rows. After running the code, click the corresponding function button to implement the corresponding table operation function.

1. jsp

 
 

  
  
 
   
 
    
Product Name
 
    
No.
 
    
Quantity
 
    
Weight
 
    
Operation
 
   
 
  
  
  
 
   
 
    
 
    
 
    
 
    
 
    
 
   
 
  
 
 
Add row

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 ='';} Else if (I = 1) {tab. rows [rownum]. cells [I]. innerHTML ='';} Else if (I = 2) {tab. rows [rownum]. cells [I]. innerHTML ='';} Else {tab. rows [rownum]. cells [I]. innerHTML ='';} Tab. rows [rownum]. insertCell (I); tab. rows [rownum]. cells [I]. innerHTML = 'delete row';} // 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.