In this article, you are going to learn Dynamically add/remove rows from an HTML table using JavaScript. This article uses pure JavaScript for adding and deleting a row from the HTML table.

Below is the example table in which we have the option to edit and remove a row and also have the option for append data in table using JavaScript  using the add button.

we want to add rows dynamically in an HTML table when the user clicks on add button. After adding rows we also input text values in each row and column which are input by the user.

In this post you will learn Dynamically insert new rows in the table pictorial guide and step-by-step examples. Once you complete this post, I swear, you will be able to write your customized code using JavaScript.

If you are a beginner or trying to learn JavaScript, then don’t skip this article, because this article contains a complete programming example for How to add data in HTML table dynamically using JavaScript. As I understand the need of beginners they require complete programming examples with pictures instead of part of the code.

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>
📰 Read more article

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.

The post How to leave just points without lines in ChartJS appeared first on Software Development | Programming Tutorials.



Read More Articles