Dynamically Add or Remove Table Rows in JavaScript and Save Data to a Database

← PrevNext →

I have recently shared a post on how to add or remove rows to an HTML table dynamically in AngularJS. Now, if you are a JavaScript enthusiast, then this post is for you. Here, I am sharing an example on how to add or remove table rows using plain JavaScript and save the data to a database.

Related Posts:

1) How do you create an entire HTML table dynamically in JavaScript? This post will help beginners to understand the basics of creating dynamic elements in JavaScript. It also explains about JavaScript createElement() method.

2) How to reead data from an HTML table using JavaScript. This quick tip explains how you can easily read data from a table, column wise or the entire table, using a simple script.

See this demo
The Markup

On my web page, I have two buttons and a <div> element (as container). I’ll use the first button to add new rows to the table. However, first I need a table. I’ll create the <table> dynamically when the page first loads and add the table it the <div> element.

To remove rows in the table, I’ll add dynamically created buttons (using JavaScript) in each row of the table.

For data entry, I’ll create and add textboxes in each cell, dynamically.

The second button will submit the data in the table.

<!DOCTYPE html>
    <title>Dynamically Add Remove Table Rows in JavaScript</title>

        table { width: 70%; }
        table, th, td { border: solid 1px #DDD;
            border-collapse: collapse; padding: 2px 3px; text-align: center;
<body onload="createTable()">
        <input type="button" id="addRow" value="Add New Row" onclick="addRow()" />
    <div id="cont"></div>   <!--the container to add the table.-->
    <p><input type="button" id="bt" value="Submit Data" onclick="submit()" /></p>

    var arrHead = new Array();
    arrHead = ['', 'Emp. Name', 'Designation', 'Age']; // table headers.

    // first create a TABLE structure by adding few headers.
    function createTable() {
        var empTable = document.createElement('table');
        empTable.setAttribute('id', 'empTable');  // table id.

        var tr = empTable.insertRow(-1);

        for (var h = 0; h < arrHead.length; h++) {
            var th = document.createElement('th'); // the header object.
            th.innerHTML = arrHead[h];

        var div = document.getElementById('cont');
        div.appendChild(empTable);    // add table to a container.

    // function to add new row.
    function addRow() {
        var empTab = document.getElementById('empTable');

        var rowCnt = empTab.rows.length;    // get the number of rows.
        var tr = empTab.insertRow(rowCnt); // table row.
        tr = empTab.insertRow(rowCnt);

        for (var c = 0; c < arrHead.length; c++) {
            var td = document.createElement('td');          // TABLE DEFINITION.
            td = tr.insertCell(c);

            if (c == 0) {   // if its the first column of the table.
                // add a button control.
                var button = document.createElement('input');

                // set the attributes.
                button.setAttribute('type', 'button');
                button.setAttribute('value', 'Remove');

                // add button's "onclick" event.
                button.setAttribute('onclick', 'removeRow(this)');

            else {
                // the 2nd, 3rd and 4th column, will have textbox.
                var ele = document.createElement('input');
                ele.setAttribute('type', 'text');
                ele.setAttribute('value', '');


    // function to delete a row.
    function removeRow(oButton) {
        var empTab = document.getElementById('empTable');
        empTab.deleteRow(oButton.parentNode.parentNode.rowIndex); // buttton -> td -> tr

    // function to extract and submit table data.
    function submit() {
        var myTab = document.getElementById('empTable');
        var arrValues = new Array();

        // loop through each row of the table.
        for (row = 1; row < myTab.rows.length - 1; row++) {
            // loop through each cell in a row.
            for (c = 0; c < myTab.rows[row].cells.length; c++) {
                var element = myTab.rows.item(row).cells[c];
                if (element.childNodes[0].getAttribute('type') == 'text') {
                    arrValues.push("'" + element.childNodes[0].value + "'");
        // finally, show the result in the console.
Try it
The first method createTable() in the script creates the table. For tables headers (column names), I am using an array. You can simply add or remove names in the array for the columns.

For the headers, you can use a JSON array by extracting data from an external JSON file.

Related Post: Convert JSON Data Dynamically to HTML Table using JavaScript

The second method is addRow(). Here, I am creating and adding rows to the table. The first button on my web page, calls this method. Every click, adds a new row.

The method not only creates rows for the table, it also creates a button (to delete row) and textboxes in each cell or the row. The table is meant for simple data entry. A slight modification in the code and you can use the table for viewing also.

The first column will have a button for each newly created row. The remaining columns will have textboxes. See how I am using the createElement() method to create new elements dynamically and the setAttribute() method to add attributes to the elements.

See this demo

The third method is removeRow(). The method takes a parameter as element (button in this case).

function removeRow(oButton) { }

As the name says, it removes (deletes) the entire row. Please check the second method addRow() again. Here, I am creating a button and appending it to the first column of each row. While setting the attributes to the button, I have assigned an onclick event along with the method [removeRow()] that it would call. I have also assigned a value (this) as parameter.

button.setAttribute('onclick', 'removeRow(this)');

The value this refers the element (the button). It will help identify the row in which the Remove button is located.

empTab.deleteRow(oButton.parentNode.parentNode.rowIndex);   // BUTTON -> TD -> TR.
The fourth method in the script is submit(). Here, I am extracting values from each textbox in the table and pushing the values in an array. I can now use the array to pass data to my database, calling either a Web Method or a Web API in Asp.Net.

The console.log(values), shows how the array stores the data.

Showing Values in Browser Console

Finally, you can save the data in a database using a Web Method in Asp.Net.

Well, that's it. Thanks for reading.

← PreviousNext →