JavaScript: Add (Insert) Rows to HTML Table

makenzi....

SOLVED CLOSED ACTIVE ANSWERED
User: makenzi.exc
Posted: on Mar 23, 2025 04:40 AM
Forum: JavaScript
Answer: 1
Views: 1024

Hi,

How to add or insert rows to HTML Table on Button Click in JavaScript.

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

<table>
    <tr>
        <td><input type="text" id="txtName" /></td>
        <td><input type="text" id="txtCountry" /></td>
        <td><input type="button" value="Add" /></td>
    </tr>
 </table>

Mudassar

0 1

Reply
ANSWER
User: Mudassar
Replied: on Mar 25, 2025 06:16 AM
Report

Hi makenzi.exc,

Refer below example.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
        table { border: 1px solid #ccc; }
        table th { background-color: #F7F7F7; color: #333; font-weight: bold; }
        table th, table td { padding: 5px; border-color: #ccc; }
    </style>
</head>
<body>
    <table id="tblCustomers" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Country</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <br />
    <table width="100%">
        <tr>
            <td><input type="text" id="txtName" /></td>
            <td><input type="text" id="txtCountry" /></td>
            <td><input type="button" onclick="Add()" value="Add" /></td>
        </tr>
    </table>
    <script type="text/javascript">
        function Add() {
            var txtName = document.getElementById("txtName");
            var txtCountry = document.getElementById("txtCountry");
            AddRow(txtName.value, txtCountry.value);
            txtName.value = "";
            txtCountry.value = "";
        };

        function AddRow(name, country) {
            //Get the reference of the Table's TBODY element.
            var tBody = document.getElementById("tblCustomers").getElementsByTagName("TBODY")[0];

            //Add Row.
            row = tBody.insertRow(-1);

            //Add Name cell.
            var cell = row.insertCell(-1);
            cell.innerHTML = name;

            //Add Country cell.
            cell = row.insertCell(-1);
            cell.innerHTML = country;
        }
    </script>
</body>
</html>

Demo

Screenshot

Downloads

Download Sample

JavaScript: Add (Insert) Rows to HTML Table

Company

Explore

Follow us

Contact Us