[Simple Way]-Add/Delete Table Rows Dynamically Using JavaScript

In this article, you will learn how to dynamically add and remove rows from an HTML table using JavaScript. The example provided below demonstrates how to utilize pure JavaScript for adding and deleting rows within an HTML table.

Throughout this post, you will be guided with step-by-step examples and illustrated instructions on how to dynamically insert new rows into the table. By the end of this article, you will possess the skills necessary to craft your own customized JavaScript code.

If you are a beginner or are in the process of learning JavaScript, it's essential not to overlook this article. It contains comprehensive programming examples accompanied by visuals, catering to the needs of beginners who require complete programming examples with detailed explanations rather than just snippets of code.

Here's an example table that allows users to edit and remove rows, and also provides an option to append data using the "Add" button.

The objective is to enable the addition of rows dynamically to an HTML table when the user clicks the "Add" button. Following the addition of rows, users can input text values into each row and column.

Dynamically add/remove rows in html table using JavaScript

You can see in the below image that here we have created HTML tables using bootstrap with delete ,edit icons and options for adding a new row in the table. Onclick of button we are adding data in HTML table dynamically using JavaScript.

javascript add rows to table dynamically

<!DOCTYPE html>
<html>
<head>
    <title>How to add data in HTML table dynamically using JavaScript</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>  
    <div class="container">
        <h1>How to add/remove data in HTML table dynamically using JavaScript</h1>
        <br />
        <fieldset>
            <legend>
                User List
            </legend>
            <table class="table">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Email</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="tblbody">
                    <tr id="1">
                        <td class="td-data">1</td>
                        <td class="td-data">George</td>
                        <td class="td-data">Bluth</td>
                        <td class="td-data">george.bluth@reqres.in</td>
                        <td class="td-data">
                            <button class="btn btn-info btn-xs" onclick="showEditRow()">Edit</button>
                            <button class="btn btn-danger btn-xs" onclick="deleteRow()">Delete</button>
                        </td>
                    </tr>
                    <tr id="2">
                        <td class="td-data">2</td>
                        <td class="td-data">Janet</td>
                        <td class="td-data">Weaver</td>
                        <td class="td-data">janet.weaver@reqres.in</td>
                        <td class="td-data">
                            <button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">Edit</button>
                            <button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">Delete</button>
                        </td>
                    </tr>
                    <tr id="3">
                        <td class="td-data">3</td>
                        <td class="td-data">Emma</td>
                        <td class="td-data">Wong</td>
                        <td class="td-data">emma.wong@reqres.in</td>
                        <td class="td-data">
                            <button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">Edit</button>
                            <button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">Delete</button>
                        </td>
                    </tr>
                    <tr id="4">
                        <td class="td-data">4</td>
                        <td class="td-data">Eve</td>
                        <td class="td-data">Holt</td>
                        <td class="td-data">eve.holt@reqres.in</td>
                        <td class="td-data">
                            <button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">Edit</button>
                            <button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">Delete</button>
                        </td>
                    </tr>
                    <tr id="5">
                        <td class="td-data">5</td>
                        <td class="td-data">Charles</td>
                        <td class="td-data">Morris</td>
                        <td class="td-data">charles.morris@reqres.in</td>
                        <td class="td-data">
                            <button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">Edit</button>
                            <button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">Delete</button>
                        </td>
                    </tr>
                    <tr id="6">
                        <td class="td-data">6</td>
                        <td class="td-data">Tracey</td>
                        <td class="td-data">Ramos</td>
                        <td class="td-data">tracey.ramos@reqres.in</td>
                        <td class="td-data">
                            <button class="btn btn-info btn-xs btn-editcustomer" onclick="showEditRow()">Edit</button>
                            <button class="btn btn-danger btn-xs btn-deleteCustomer" onclick="deleteRow()">Delete</button>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-data"></td>
                        <td class="td-data"><input type="text" id="txtfirst_name" placeholder="first name.."></td>
                        <td class="td-data">
                            <input type="text" id="txtlast_name" placeholder="last name..">
                        </td>
                        <td class="td-data"><input type="email" id="txtemail" placeholder="email.."></td>
                        <td class="td-data">
                            <button id="btnaddCustomer" onclick="addRow()" class="btn btn-success"><i class="fa fa-plus-circle" aria-hidden="true"></i> Add</button>
                        </td>
                    </tr>
                </tbody>

            </table>
        </fieldset>
    </div>
</body>
</html>
<script type="text/javascript">
    function CreateUniqueID() {
const ID = Date.now();
return ID;
    }

    function addRow() {
event.preventDefault()
var rowID = CreateUniqueID();
var txtfirst_name = document.getElementById("txtfirst_name").value;
if (!txtfirst_name) {
            alert('Please enter name!')
return false;
        }
var txtlast_name = document.getElementById("txtlast_name").value;
if (!txtlast_name) {
            alert('Please enter last name!')
return false;
        }
var email = document.getElementById("txtemail").value;
if (!email) {
            alert('Please enter email!')
return false;
        }
var emailfilter = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!emailfilter.test(email)) {
            alert('Please enter a valid email address!');
return false;
        }

var tableRow = "<tr Id='" + rowID + "'>"
            + "<td class='td-data'>" + rowID + "</td>"
            + "<td class='td-data'>" + txtfirst_name+ "</td>"
            + "<td class='td-data'>" + txtlast_name+ "</td>"
            + "<td class='td-data'>" + email+ "</td>"
            + "<td class='td-data'>" +
"<button class='btn btn-info btn-xs btn-editcustomer' onclick='showEditRow()'>Edit</button>" +
"<button class='btn btn-danger btn-xs btn-deleteCustomer' onclick='deleteRow()'>Delete</button>"
            + "</td>"
            + "</tr>";

var body = document.getElementById('tblbody');
var rows = body.rows

// pick the last and prepend
        rows[rows.length - 1].insertAdjacentHTML('beforebegin', tableRow)
        document.getElementById('txtfirst_name').value = "";
        document.getElementById('txtlast_name').value = "";
        document.getElementById('txtemail').value = "";
    };

    function insert_Row(button) {
       
    }


    function showEditRow() {
        debugger;
var rowdataId = event.target.parentNode.parentNode.id;
//this gives id of tr whose button was clicked
/*returns array of all elements with "td-data"" class within the row with given id*/
var data = document.getElementById(rowdataId).querySelectorAll(".td-data");

var ID = data[0].innerHTML;
var name = data[1].innerHTML;
var lastname = data[2].innerHTML;
var email = data[3].innerHTML;

        data[0].innerHTML = '<input name="txtupdate_ID"  disabled id="txtupdate_ID" value="' + ID + '"/>';
        data[1].innerHTML = '<input name="txtupdate_Name" id="txtupdate_Name" value="' + name + '"/>';
        data[2].innerHTML = '<input name="txtupdate_lastname" id="txtupdate_lastname" value="' + lastname + '"/>';
        data[3].innerHTML = '<input name="txtupdate_email" id="txtupdate_email" value="' + email + '"/>';


        data[4].innerHTML =
"<button class='btn btn-primary btn-xs btn-updateCustomer' onclick='updateData()'>" +
"Update</button>"
            + "<button class='btn btn-warning btn-xs btn-cancelupdate' onclick='cancelUpdate()'>Cancel</button>"
            + "<button class='btn btn-danger btn-xs btn-deleteCustomer' onclick='deleteRow()'>"
            + "Delete</button>"
    }
    function cancelUpdate() {
var rowdataId = event.target.parentNode.parentNode.id;
var dataRow = document.getElementById(rowdataId); //this gives tr of  whose button was clicked
var trRow = dataRow.querySelectorAll(".td-data");

var Name = trRow[1].querySelectorAll("#txtupdate_Name")[0].value;
var lastname = trRow[2].querySelectorAll("#txtupdate_lastname")[0].value;
var email = trRow[3].querySelectorAll("#txtupdate_email")[0].value;

        trRow[0].innerHTML = rowdataId;
        trRow[1].innerHTML = Name;
        trRow[2].innerHTML = lastname;
        trRow[3].innerHTML = email;


var actionbtn = "<button  class='btn btn-info btn-xs' onclick='showEditRow()'>Edit</button>" +
"<button class='btn btn-danger btn-xs' onclick='deleteRow()'>Delete</button>"
        trRow[4].innerHTML = actionbtn;
    }
    function deleteRow() {
var rowdataId = event.target.parentNode.parentNode.id;
        document.getElementById(rowdataId).remove();
    }
    function updateData() {
var rowdataId = event.target.parentNode.parentNode.id;
var dataRow = document.getElementById(rowdataId); //this gives tr of  whose button was clicked
var datatr = dataRow.querySelectorAll(".td-data");

var Name = datatr[1].querySelector("#txtupdate_Name").value;
var lastname = datatr[2].querySelector("#txtupdate_lastname").value;
var email = datatr[3].querySelector("#txtupdate_email").value;
        
        datatr[0].innerHTML = rowdataId;
        datatr[1].innerHTML = Name;
        datatr[2].innerHTML = lastname;
        datatr[3].innerHTML = email;
var actionbtn = "<button  class='btn btn-info btn-xs' onclick='showEditRow()'>Edit</button>" +
"<button class='btn btn-danger btn-xs' onclick='deleteRow()'>Delete</button>"
        datatr[4].innerHTML = actionbtn;
    }
</script>

Each row in the table body <tbody> represents a user's data, with each cell containing specific information about the user, such as id, first name, last name, and email.At the bottom of the table, there's a row with input fields for adding a new user's data. It includes input fields for first name, last name, and email, along with an "Add" button.

The JavaScript functions are defined at the end of the HTML code , these functions handle actions such as adding, editing, and deleting rows dynamically.

CreateUniqueID: Generates a unique ID based on the current timestamp.
addRow: Adds a new row to the table when the "Add" button is clicked. It retrieves input values from the user and validates them before appending the new row.
showEditRow: Handles the editing functionality. When the "Edit" button is clicked, it replaces the cell values with input fields, allowing the user to edit the data.
cancelUpdate: Cancels the editing operation and restores the original values of the row.
deleteRow: Deletes the row when the "Delete" button is clicked.
updateData: Updates the row with the new data entered by the user during the editing operation.

Above code exmaple enables users to interactively manage data within the HTML table by adding, editing, and deleting rows dynamically.

Frequently individuals utilize these two terms website composition and web improvement reciprocally, while in actuality website composition is in fact a subset of its more extensive classification of web advancement.

Though the design of the page and the presence of the components are regularly characterized utilizing CSS (flowing templates). That is the reason we can say that most sites are made with a mix of HTML and CSS, which characterizes how each page ought to show up in the program.

Some website specialists like to hand code pages (in which they type in HTML and CSS without any preparation), while others utilize a “WYSIWYG” supervisor like Adobe Dreamweaver.

Another extremely famous way is to plan sites, which is known as a substance the executives framework, like WordPress or Joomla. These administrations give different site layouts, which you can see as a beginning stage for another site.

Website admins then add their substance to it and furthermore modify the format with the assistance of an online connection point. Frequently proficient bloggers utilize this technique for their blog.

Where HTML and CSS are utilized for the plan or look of the site, or for the vibe together, however the pictures are made independently. That is the reason visual communication additionally covers with website composition, since visual architects frequently make pictures to be utilized in the web.

That is the reason a few designs projects, for example, Adobe Photoshop have a choice “Save for Web… ” which gives a simpler method for trading the picture. Alongside that likewise for web distributing in completely upgraded design.

Web Designing Course fundamentally manages the creation and support of sites. Every one of those website pages that you find in Google, Yahoo and Firefox are fundamentally planned and kept up with by Web-Designers.

This course is chiefly centered around the center area of need which is generally significant for the production of sites like HTML, JAVA, and CSS.

Understudies who take these site planning courses, they get to gain some significant experience till the finish of the course, for example, how the site is made, how they are kept up with and furthermore activitys as per their need. Furthermore, the impacts are filled.

There is no age to realize this course, it tends to be advanced by any individual who has an energy for PCs and sites, I would agree that that even youngsters can without much of a stretch learn it by making it a side interest.

To get familiar with these courses, you can join any great private establishments or instructing that give web-planning courses. You can likewise get familiar with these courses on the web in the event that you need. There are various levels of this course like fledgling, master and so on, because of which there is a distinction in their length.

[Simple Way]-Add/Delete Table Rows Dynamically Using JavaScript

Dynamically add/remove rows in html table using JavaScript

Read more article

Read Similar Articles