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:
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" >
</ 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" >
</ 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
<!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" >
</ 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:
Last Updated :
29 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...