June 4, 2020

How to Add Row to HTML Table Using Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to add row to HTML table using javascript. Whenever we want to display a large dataset, we make use of the HTML table and display it in the form of rows and columns. Generally, such data is received by making a request to the server.

Create, read, update, and delete are 4 basic operations to keep your data persistent in a database. Such operations are done by making GET, POST, PUT, PATCH, and DELETE requests to the backend server. We are not going to cover it in this tutorial because we are solely going to look for the functionality of updating the UI by appending a row to the existing HTML table.

There are various methods to append a row to the HTML table. We are going to achieve this by making use of template string because I believe it is the simplest and straightforward approach with no complexity at all.

In the following example, we have a table and a couple of input fields. Upon click of a button, we will take the values from the input fields, form a template string with required HTML tags and append a row to the HTML table. Please have a look over the code example and the steps given below.

HTML & CSS

We have multiple elements in the HTML file such as div, input, button, etc. The div element with a class of container is just a wrapper for the rest of the elements.
The button element has “Add” as innerText.
The table element already has 3 rows with some data. We are going to append more rows using javascript.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="container">
        <div id="data">
            <input type="text" id="name" placeholder="Enter Name">
            <input type="number" id="age" placeholder="Enter Age">
            <input type="text" id="country" placeholder="Enter Country">
            <button>Add</button>
        </div>

        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Country</th>
            </tr>

            <tr>
                <td>Peter</td>
                <td>20</td>
                <td>USA</td>
            </tr>

            <tr>
                <td>James</td>
                <td>40</td>
                <td>UK</td>
            </tr>

            <tr>
                <td>Ronald</td>
                <td>30</td>
                <td>Canada</td>
            </tr>
        </table>

    </div>


    <script src="script.js"></script>
    
</body>
</html>

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

th,td {
    border: 1px solid black;
    padding: 10px;
}

#data {
    margin-bottom: 10px;
}

#data input, button {
    padding: 10px;
    width: 90px;
}

Javascript

We have selected the table, button, and all the input elements using the document.querySelector() method and stored them in the table, btnAdd, nameInput, ageInput, and countryInput variables respectively.
We have attached a click event listener to the button element.
In the event handler function, we are storing values of input elements in the name, age, and country variables.
We have created a template string and stored it in the template variable. This template string contains all the variables along with tr and td tags which are required for a table row.
We are appending the template to the HTML content of the table using the innerHTML property and addition assignment operator (=+).

let btnAdd = document.querySelector('button');
let table = document.querySelector('table');


let nameInput = document.querySelector('#name');
let ageInput = document.querySelector('#age');
let countryInput = document.querySelector('#country');


btnAdd.addEventListener('click', () => {
    let name = nameInput.value;
    let age = ageInput.value;
    let country = countryInput.value;

    let template = `
                <tr>
                    <td>${name}</td>
                    <td>${age}</td>
                    <td>${country}</td>
                </tr>`;

    table.innerHTML += template;
});

You May Also Like: