javascript - Access rows from different tables using row IDs

Question

Suppose I have two different tables as below:

<table id="T1">
  <tr id="a">
    <td>a</td>
  </tr>
  <tr id="b">
    <td>b</td>
  </tr>
</table>

<table id="T2">
  <tr id="a">
    <td>A</td>
  </tr>
  <tr id="b">
    <td>B</td>
  </tr>
</table>

These two tables have different IDs. However, due to design, some of their rows, when created, have the same IDs. In this case, both rows have the same ids a and b.

I am having trouble accessing rows by using document.getElementById since it could be multiple duplication. How do I specify a row using both the table ID and the row ID in JavaScript? Thanks.

question from:https://stackoverflow.com/questions/65884246/access-rows-from-different-tables-using-row-ids

Answer 1

You should never ever use the same ID twice! That said, you can use document.querySelectorAll() where you can use the same selectors as you use in CSS. Something like so to get all <tr>

var rowsOfTable1 = document.querySelectorAll('#T1 tr');
var rowsOfTable2 = document.querySelectorAll('#T2 tr');

rowsOfTable1.forEach( row => { console.log(row.innerHTML) });
rowsOfTable2.forEach( row => { console.log(row.innerHTML) });

<table id="T1">
  <tr id="a">
    <td>T1 a</td>
  </tr>
  <tr id="b">
    <td>T1 b</td>
  </tr>
</table>

<table id="T2">
  <tr id="a">
    <td>T2 A</td>
  </tr>
  <tr id="b">
    <td>T2 B</td>
  </tr>
</table>