How to dynamically insert id into table element using JavaScript ?
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
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
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
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:
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
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:
