Rutuja Nikum Watch on YouTube

Add data in table dynamically using HTML and JavaScript

3 min read 6 hours ago
Published on Feb 26, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you'll learn how to dynamically add data to an HTML table using JavaScript. This is a fundamental skill for web developers, allowing you to create interactive and user-friendly web applications. By the end of this guide, you'll have a working example of a dynamic table that can be populated with user input.

Step 1: Set Up Your HTML Structure

Start by creating the basic HTML layout that includes a table and an input form for data entry.

  1. Create a new HTML file and add the following code:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Table</title>
</head>
<body>
    <h1>Dynamic Table Example</h1>
    <form id="dataForm">
        <input type="text" id="name" placeholder="Enter Name" required>
        <input type="text" id="age" placeholder="Enter Age" required>
        <button type="submit">Add to Table</button>
    </form>
    <table id="dataTable" border="1">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script src="script.js"></script>
</body>
</html>

  2. This code creates a simple form for user input and an empty table to display the data.

Step 2: Write the JavaScript Functionality

Next, you'll add the JavaScript code to handle form submissions and update the table dynamically.

  1. Create a new JavaScript file named script.js and include the following code:

    document.getElementById('dataForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the default form submission
    
    // Get input values
    const name = document.getElementById('name').value;
    const age = document.getElementById('age').value;
    
    // Create a new row and cells
    const table = document.getElementById('dataTable').getElementsByTagName('tbody')[0];
    const newRow = table.insertRow();
    const nameCell = newRow.insertCell(0);
    const ageCell = newRow.insertCell(1);
    
    // Add data to the cells
    nameCell.textContent = name;
    ageCell.textContent = age;
    
    // Clear the input fields
    document.getElementById('dataForm').reset();
});

  2. This script does the following:

    • Listens for the form submission event.
    • Prevents the default form submission behavior.
    • Retrieves the values from the input fields.
    • Creates a new row in the table and populates it with the input data.
    • Resets the form fields after submission.

Step 3: Test Your Implementation

Now that you have set up the HTML and JavaScript, it's time to test the functionality.

  1. Open your HTML file in a web browser.
  2. Enter a name and age in the form fields.
  3. Click the "Add to Table" button.
  4. Verify that the data appears in the table below.

Conclusion

You've successfully created a dynamic table that allows users to add data via a form. This basic functionality can be further enhanced by incorporating features such as data validation, row deletion, and updating existing rows. For additional functionality, consider exploring the linked videos in the description for deleting rows and updating entries.

Feel free to experiment with the design and functionality to make it your own!

Table of Contents

Recent