Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to get id from tr tag and display it in a new td with JavaScript?
When working with HTML tables, you often need to extract the ID from table rows and display them within the table itself. This tutorial shows how to get the ID from <tr> tags and add them as new table cells using JavaScript.
Sample Table Structure
Consider the following table with ID attributes on each row:
<table>
<tr id='StudentDetails'>
<th>StudentName</th>
<th>StudentCountryName</th>
</tr>
<tr id='FirstRow'>
<td>JohnDoe</td>
<td>UK</td>
</tr>
<tr id='SecondRow'>
<td>DavidMiller</td>
<td>US</td>
</tr>
</table>
Method: Using document.querySelectorAll()
The most effective approach is to use document.querySelectorAll('table tr') to select all table rows, then use insertCell() to add new cells containing the row IDs.
Complete Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display TR ID in New TD</title>
<style>
td, th, table {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
text-align: left;
}
table {
margin: 20px;
}
</style>
</head>
<body>
<table>
<tr id='StudentDetails'>
<th>Row ID</th>
<th>StudentName</th>
<th>StudentCountryName</th>
</tr>
<tr id='FirstRow'>
<td>JohnDoe</td>
<td>UK</td>
</tr>
<tr id='SecondRow'>
<td>DavidMiller</td>
<td>US</td>
</tr>
</table>
<script>
// Get all table rows and add ID as first cell
document.querySelectorAll('table tr').forEach(function(trObj) {
var newCell = trObj.insertCell(0);
newCell.textContent = trObj.id || 'No ID';
});
</script>
</body>
</html>
How It Works
The JavaScript code follows these steps:
-
document.querySelectorAll('table tr')selects all<tr>elements within tables -
forEach()iterates through each table row -
insertCell(0)creates a new cell at the beginning of each row (index 0) -
textContentsets the cell content to the row's ID value - If no ID exists, it displays "No ID" as fallback
Alternative Approach: Appending at End
To add the ID cell at the end instead of the beginning:
<script>
document.querySelectorAll('table tr').forEach(function(trObj) {
var newCell = trObj.insertCell(-1); // -1 appends at end
newCell.textContent = trObj.id || 'No ID';
newCell.style.fontWeight = 'bold';
newCell.style.color = 'blue';
});
</script>
Key Points
-
insertCell(0)adds the cell at the beginning,insertCell(-1)at the end - Always check if the ID exists before using it
- You can style the new cells using CSS properties
- This method works with any number of table rows
Conclusion
Using document.querySelectorAll() with insertCell() provides a clean way to extract table row IDs and display them as new table cells. This technique is useful for debugging, data analysis, or creating dynamic table displays.
4K+ Views
