CODEWITHSUNDEEP
javascripthtmldom
Jackson Tai
Jackson Tai

Reputation: 493

How to access second cell of each row in a html table using javascript?

I was trying to access every second cell of each row in a table, but it doesn't seem to be working and just shows a bunch of undefined variables. Is there any way that I can do this? Any help would be appreciated.

Example table :

Column A Column B Column C
Data 1A Data 1B Data 1C
Data 2A Data 2B Data 2C
Data 3A Data 3B Data 3C

Note : I was trying to access the italic data cell.

 let table = document.querySelector("table");
 
 for (let row of table.rows) {
  
      for (let cell of row.cells) {

           console.log(cell[1]);

      }

 }

Output :

Undefined

Expecting output :

<td>Data 1B</td>
<td>Data 2B</td>
<td>Data 3B</td>

Upvotes: 3

Views: 1922

Answers (2)

The KNVB
The KNVB

Reputation: 3844

This is my solution:

let secCellList= document.querySelectorAll("table tbody tr td:nth-child(2)");
    secCellList.forEach(secondCell=>{
    console.log(secondCell.innerHTML);
})

Upvotes: 2

ihpar
ihpar

Reputation: 676

Please see:

const tbl = document.querySelector("table");
for(let row of tbl.rows) {
  console.log(row.cells[1].innerHTML);
}
<table>
  <tbody>
    <tr>
      <td>td 0.0</td>
      <td>td 0.1</td>
      <td>td 0.2</td>
    </tr>
    <tr>
      <td>td 1.0</td>
      <td>td 1.1</td>
      <td>td 1.2</td>
    </tr>
  </tbody>
</table>

In your code you are trying to reach the index of inner value of the iterated cell as:

for (let cell of row.cells) {
    console.log(cell[1]);
}

which is incorrect.

Upvotes: 4

Related Questions