Dynamically Add/Remove Rows In HTML Table Using JavaScript
Last Updated : Mar 11, 2024
IN - HTML JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of dynamically add/remove rows in html table using JavaScript, here we getting inputs from user then those details inserted to dynamic table using javascript.
When inserted rows in table we has option also for remove the row.
Step By Step Guide On Dynamically Add/Remove Rows In Html Table Using JavaScript :-
First we need to create input fields and button for adding row to the html table.
Then we created dynamic table and adding input fields name to table header.
When user filling all input fields and click the row button all user inputs added to table row. At table row had remove option with user inserted input values.
When user clicks on remove button it removes the row from the table.
Those functions completed by using DOM elements property.
<html>
<head>
<title>Add rows dynamically in html table</title>
</head>
<body>
Username: <input type="text" id="username"><br/><br/>
Address: <input type="text" id="address"><br/><br/>
Age: <input type="number" id="age"><br/><br/>
<button id="addRow">Add Row</button><br/><br/>
<script>
var userTable = document.createElement('table');
userTable.setAttribute('id', 'userTable');
document.body.appendChild(userTable);
var tableHeadRow = userTable.insertRow(0);
var tableHeadArray = new Array();
tableHeadArray = ['User Name', 'Address', 'Age', 'Option'];
for (var i = 0; i < tableHeadArray.length; i++) {
var th = document.createElement('th');
th.innerHTML = tableHeadArray[i];
tableHeadRow.appendChild(th);
}
//add border
userTable.setAttribute('border', '1');
//add cell padding
userTable.setAttribute('cellpadding', '10px');
document.getElementById("addRow").addEventListener("click", function(){
const username = document.getElementById("username");
const address = document.getElementById("address");
const age = document.getElementById("age");
var tr = userTable.insertRow(-1);
var tableDataArray = new Array();
tableDataArray = [username.value, address.value, age.value];
for (var i = 0; i < tableDataArray.length; i++) {
var td = tr.insertCell(-1);
td.innerHTML = tableDataArray[i];
}
var td = tr.insertCell(-1);
// add a button
var button = document.createElement('button');
// set button attributes.
button.setAttribute('type', 'button');
button.innerHTML = 'Remove';
// set onclick event.
button.setAttribute('onclick', 'remRow(this)');
td.appendChild(button);
username.value = "";
address.value = "";
age.value = "";
});
//remove row
function remRow(el) {
var uTable = document.getElementById('userTable');
uTable.deleteRow(el.parentNode.parentNode.rowIndex);
}
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- We created three input fields namely, ‘username,address,age’ and created button for adding row to table.
- In <script> tag we created table using ‘document.createElement()’ and it’s for creating html elements in javascript. For setting attribute to any elements in html using javascript (i.e) ‘setAttribute('id', 'id-name')’. We setAttribute('id', 'userTable') using this to sets id name as ‘userTable’.
- Then we added this table to html body by document.body.appendChild(). The appendChild() methods is used to insert a new node or reposition an existing node as the last child of a particular parent node.
- insertRow() used for adding row to the table and we created ‘tableHeadArray’ array of table header names. For handling array of values we need to use loops here we used ‘for’ loop insert header names to table header. For place the headers name to the table header using ‘innerHTML’. Its used for append text to the html elements.
- We created ‘tableHeadRow’ row with position of ‘0’. To this row we binds the table header. Using ‘setAttribute()’ method we sets border to ‘1’ and cellpadding to ‘10px’ attributes to ‘userTable’.
- Used ‘addEventListener’ to the button ‘Add Row’ for adding row of input values. We used variable for referring user input values, namely ‘username,address,age’ and we inserting row to userTable by ‘insertRow(-1)’ its refers from the last it starts insertion.
- We creating array storing user inputs and inserted using loop same as point 9th. This line ‘var td = tr.insertCell(-1);’ is second time for refresh to set it position to ‘-1’ because after loop its value is changed so we need to set ‘-1’ for start insertion loop for another time.
- After successful insertion of row we created button with type ‘button’, name ‘remove’ and event ‘Onclick’ with function ‘remRow(this)’. ‘this’ refers lastly created row and bind with last column of this row.
- Same as point 12th for refresh user input variables set to ‘null’ values. When user click on that remove button ‘remRow(el)’ function loading. Here we used ‘deleteRow()’ for deletion and deleteRow() method removes the row at the specific index from a table.
- Both </body>, </html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
I hope this tutorial on dynamically add/remove rows in html table using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
In conclusion we are able to know how to add or remove rows dynamically in html using javascript.
When using javascript we can get results fast and easily. Javascript is used by programmers across the world to create dynamic and interactive web content like applications and browsers and it is a client side programming language.
I hope this guidance will helpful for everyone.
About Pragati
