Title: Access rows from different tables using row IDs
Tags: javascript;html
Question: Suppose I have two different tables as below:
<table id=&quot;T1&quot;&gt;
<tr id=&quot;a&quot;&gt;
<td&gt;a</td&gt;
</tr&gt;
<tr id=&quot;b&quot;&gt;
<td&gt;b</td&gt;
</tr&gt;
</table&gt;
<table id=&quot;T2&quot;&gt;
<tr id=&quot;a&quot;&gt;
<td&gt;A</td&gt;
</tr&gt;
<tr id=&quot;b&quot;&gt;
<td&gt;B</td&gt;
</tr&gt;
</table&gt;
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.
Comment: Never use same id twice. Use classes instead

Comment: You can combine table ID and row ID with selectors such ```document.querySelector('#T1 #a')```

Comment: @Aleksandar I understand that. But the elsewhere in the app, when a certain row is clicked, the app relates the row to certain item in the database for retrieval. Hence, the item ID in the database is assigned as the row ID. Kind of out of my control.

Comment: To explain further, the table ID here relates to the table in the database. And the row ID relates to the item ID in the database. Since items of different tables may have the same ID (integer), hence my problem.

Here is the accepted answer: 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&gt;
var rowsOfTable1 = document.querySelectorAll('#T1 tr');
var rowsOfTable2 = document.querySelectorAll('#T2 tr');
rowsOfTable1.forEach( row =&gt; { console.log(row.innerHTML) });
rowsOfTable2.forEach( row =&gt; { console.log(row.innerHTML) });
<table id="T1"&gt;
<tr id="a"&gt;
<td&gt;T1 a</td&gt;
</tr&gt;
<tr id="b"&gt;
<td&gt;T1 b</td&gt;
</tr&gt;
</table&gt;
<table id="T2"&gt;
<tr id="a"&gt;
<td&gt;T2 A</td&gt;
</tr&gt;
<tr id="b"&gt;
<td&gt;T2 B</td&gt;
</tr&gt;
</table&gt;
or you can be more specific with the selector. If you know you only want to get 1 item you can also use Document.querySelector() which will not return an array but just the single item, something like:
var aOfTable1 = document.querySelector('#T1 #a');
var bOfTable2 = document.querySelector('#T2 #b');
console.log(aOfTable1.innerHTML);
console.log(bOfTable2.innerHTML);
<table id="T1"&gt;
<tr id="a"&gt;
<td&gt;T1 a</td&gt;
</tr&gt;
<tr id="b"&gt;
<td&gt;T1 b</td&gt;
</tr&gt;
</table&gt;
<table id="T2"&gt;
<tr id="a"&gt;
<td&gt;T2 A</td&gt;
</tr&gt;
<tr id="b"&gt;
<td&gt;T2 B</td&gt;
</tr&gt;
</table&gt;
or you could select all <tr&gt; elements with an id like:
var rowsOfTable1 = document.querySelectorAll('#T1 tr[id]');
Comment for this answer: Thanks. The bottom solution works for me. I think I am going to change the way row IDs are created, as per some comments above.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 4, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:01/25/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html>', 'Title': 'Access rows from different tables using row IDs', 'ViewCount': 44, 'id': 65884246, 'user_AboutMe': None, 'user_AccountId': 12847599.0, 'user_DisplayName': 'Tristan Tran', 'user_Reputation': 1231.0, 'user_Views': 187.0, 'user_id': 10765455.0}}