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.