How to get id from tr tag and display it in a new td with JavaScript?

Javascript Web Development Front End Technology Object Oriented Programming

Let’s say the following is our table −

<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>

To get id from tr tag and display it in a new td, use document.querySelectorAll(table tr).

Example

Following is the code −

Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
   td,
   th,
   table {
      border: 1px solid black;
      margin-left: 10px;
      margin-top: 10px;
   }
</style>
<body>
   <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>
</body>
<script>
   document.querySelectorAll('table tr').forEach(trObj => {
      var tableValue = trObj.insertCell(0);
      tableValue.textContent = trObj.id;
   });
</script> 
</html>

To run the above program, save the file name “anyName.html(index.html)”. Right click on the file and select the option “Open with Live Server” in VS Code editor.

Output

This will produce the following output on console −

AmitDiwan

Updated on: 09-Nov-2020

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started