JS method for dynamically adding and deleting table rows

  • 2021-01-19 22:00:19
  • OfStack

This article illustrates JS's method of dynamically adding and deleting table rows. To share with you for your reference, as follows:


function insertRow(tableName,className,bgcolor, cellContentArray){
 var t = document.getElementByIdx(tableName); // achieve table table 
 var tr = t.insertRow();  // insert 1 line 
 tr.className=className;  // Set up the css
 tr.bgcolor=bgcolor;   // Sets the background color of the row 
 for( var i=0;i<cellContentArray.length;i++){
 var td = tr.insertCell(); // insert 1 column 
 td.innerHTML=cellContentArray[i]; // Set column content 
 }
}
function deleteRow(tableName,btn){
 var t = document.getElementByIdx(tableName); // achieve table table 
 var tr = btn.parentNode.parentNode; // Get the corresponding row 
 t.deleteRow(tr.rowIndex);
}

More about JavaScript related content interested readers can view the site features: "JavaScript search algorithm skills summary", "JavaScript animation effects and skills summary", "JavaScript error and debugging skills summary", "JavaScript data structure and algorithm skills summary", "JavaScript eraser algorithm and skills summary" and "JavaScript mathematical operation usage summary"

I hope this article is helpful to JavaScript program design.


Related articles: