Open In App

How to dynamically insert id into table element using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

This article explains how to dynamically insert “id” into the table element. This can be done by simply looping over the tables and adding “id”s dynamically.

Below are the approaches used to dynamically insert id into table elements using JavaScript:

Approach 1: Using classList Object

This approach utilizes the classList object to add a class to a dynamically created table row. The class is added using the add method. Useful when you want to apply styles or behavior to multiple rows that share the same class.

Example: In this example, we are using the ClassList Object.

HTML




<!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>
    <style>
        .dynamicTableObject {}
    </style>
</head>
 
<body>
 
    <button onclick="addRowWithClassListObject()">
        Add Row (classList Object)
    </button>
    <table id="myTableObject" class="dynamicTableObject">
        <!-- Existing Table Content Goes Here -->
    </table>
 
    <script>
        let rowCountClassListObject = 1;
 
        function addRowWithClassListObject() {
            const table = document.getElementById("myTableObject");
            const newRow = table.insertRow(-1);
            newRow.classList.add("dynamicTableObject");
            const cell = newRow.insertCell(0);
            cell.innerHTML = "Row " + rowCountClassListObject++;
        }
    </script>
 
</body>
 
</html>


Output:

o1

Approach 2: Using classList Method

Similar to the first approach, this method uses the classList property of an HTML element. However, instead of using the add method, it directly adds a class using the classList property. Suitable when you prefer a concise method to directly add a class to an element.

Example: In this example we are using ClassList Method.

HTML




<!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>
    <style>
        .dynamicTableMethod {
            /* Define your styles for dynamicTableMethod class */
        }
    </style>
</head>
 
<body>
 
    <button onclick="addRowWithClassListMethod()">
      Add Row (classList Method)
      </button>
    <table id="myTableMethod" class="dynamicTableMethod">
        <!-- Existing Table Content Goes Here -->
    </table>
 
    <script>
        let rowCountClassListMethod = 1;
 
        function addRowWithClassListMethod() {
            const table = document.getElementById("myTableMethod");
            const newRow = table.insertRow(-1);
            newRow.classList.add("dynamicTableMethod");
            const cell = newRow.insertCell(0);
            cell.innerHTML = "Row " + rowCountClassListMethod++;
        }
    </script>
 
</body>
 
</html>


Output:

o22

Approach 3: Using id Property

This approach assigns an id directly to the table element using the id property. It doesn’t use the classList object or method for adding classes. Useful when you need a unique identifier for the table element. Typically used when there is only one element with a specific purpose on the page.

Example: In this example we are using Id property.

HTML




<!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>
 
    <button onclick="addRowWithIdProperty()">
      Add Row (id Property)
      </button>
    <table id="myTableIdProperty">
        <!-- Existing Table Content Goes Here -->
    </table>
 
    <script>
        let rowCountIdProperty = 1;
 
        function addRowWithIdProperty() {
            const table = document.getElementById("myTableIdProperty");
            const newRow = table.insertRow(-1);
            const cell = newRow.insertCell(0);
            cell.innerHTML = "Row " + rowCountIdProperty++;
        }
    </script>
 
</body>
 
</html>


Output:

o3



Last Updated : 29 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads