How to dynamically insert id into table element using JavaScript ?

Last Updated : 29 Dec, 2023

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:

Table of Content

Using classList Object
Using classList Method
Using id Property

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:

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.