Get a specific row from specific table with JavaScript?

Question

Say my dynamic HTML looks something like this:

<table id="DanishCompanies">
  <tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
  <tr id="19"><td>Company A</td><td>80</td><td>1980</td></tr>
  <tr id="17"><td>Company B</td><td>12</td><td>1910</td></tr>
  <tr id="26"><td>Company C</td><td>5000</td><td>2015</td></tr>
</table>
<table id="SwedishCompanies">
  <tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
  <tr id="10"><td>Company D</td><td>500</td><td>1950</td></tr>
  <tr id="12"><td>Company E</td><td>900</td><td>1990</td></tr>
  <tr id="17"><td>Company F</td><td>90</td><td>2010</td></tr>
</table>
<table id="NorwegianCompanies">
  <tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
  <tr id="17"><td>Company G</td><td>105</td><td>1970</td></tr>
  <tr id="18"><td>Company H</td><td>100</td><td>1980</td></tr>
  <tr id="19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>

Each tr has an ID, but ID only relatively unique to the table, as other tables might have the ID, and the number of rows might vary.

How would I obtain the founding year (column 2) of a Swedish company with an id of 17?

I would imagine you would do it like this but I fail to find the correct code.

var table = document.getElementById("SwedishCompanies");
var row_index = ??? //should return 2
return table[row_index].cells[2].innerHTML;

I can't use getElementById just to get id "17", because I would risk getting Danish or Norwegian's company because the order of these tables is random.

do you have control over this HTML in any way? having multiple elements share the same id is not technically allowed (though every browser and element selector I know of allows it and generally does the right thing with it), and having globally unique ids would solve your problem as well. — Dan O
– Dan O, Commented Apr 11, 2021 at 2:04

Taki · Accepted Answer · 2021-04-11 01:56:33Z

you're just not using the right selector,

#DanishCompanies tr[id="17"]

will get you the tr with id 17 that's a child of DanishCompanies :

const row = document.querySelector('#DanishCompanies tr[id="17"]');
const year = row.cells[2].innerHTML;
console.log(year);

<table id="DanishCompanies">
  <tr>
    <th>Name</th>
    <th>Employees</th>
    <th>Founded</th>
  </tr>
  <tr id="19">
    <td>Company A</td>
    <td>80</td>
    <td>1980</td>
  </tr>
  <tr id="17">
    <td>Company B</td>
    <td>12</td>
    <td>1910</td>
  </tr>
  <tr id="26">
    <td>Company C</td>
    <td>5000</td>
    <td>2015</td>
  </tr>
</table>
<table id="SwedishCompanies">
  <tr>
    <th>Name</th>
    <th>Employees</th>
    <th>Founded</th>
  </tr>
  <tr id="10">
    <td>Company D</td>
    <td>500</td>
    <td>1950</td>
  </tr>
  <tr id="12">
    <td>Company E</td>
    <td>900</td>
    <td>1990</td>
  </tr>
  <tr id="17">
    <td>Company F</td>
    <td>90</td>
    <td>2010</td>
  </tr>
</table>
<table id="NorwegianCompanies">
  <tr>
    <th>Name</th>
    <th>Employees</th>
    <th>Founded</th>
  </tr>
  <tr id="17">
    <td>Company G</td>
    <td>105</td>
    <td>1970</td>
  </tr>
  <tr id="18">
    <td>Company H</td>
    <td>100</td>
    <td>1980</td>
  </tr>
  <tr id="19">
    <td>Company I</td>
    <td>45</td>
    <td>2000</td>
  </tr>
</table>

Mister Jojo · Accepted Answer · 2021-04-11 02:04:33Z

this way (id with number values complicates the css select syntax)

function getTDval( tableId, rowId, colNum)
  {
  return document
          .querySelector(`table#${tableId} tr[id="${rowId}"]`)
          .cells[colNum].textContent
  }

console.log(  getTDval('SwedishCompanies','17',2) )

<table id="DanishCompanies">
  <tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
  <tr id="19"><td>Company A</td><td>80</td><td>1980</td></tr>
  <tr id="17"><td>Company B</td><td>12</td><td>1910</td></tr>
  <tr id="26"><td>Company C</td><td>5000</td><td>2015</td></tr>
</table>
<table id="SwedishCompanies">
  <tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
  <tr id="10"><td>Company D</td><td>500</td><td>1950</td></tr>
  <tr id="12"><td>Company E</td><td>900</td><td>1990</td></tr>
  <tr id="17"><td>Company F</td><td>90</td><td>2010</td></tr>
</table>
<table id="NorwegianCompanies">
  <tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
  <tr id="17"><td>Company G</td><td>105</td><td>1970</td></tr>
  <tr id="18"><td>Company H</td><td>100</td><td>1980</td></tr>
  <tr id="19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>

Robert Siemer · Accepted Answer · 2021-04-11 02:16:26Z

1

It is invalid HTML to reuse the same id value within a page. You might use private data-... attributes for that.

Apart from that, the following line gets the human readable text of the third child node (third column in this case), which is the year (as a string).

document.querySelector('#DanishCompanies tr[id="17"]')
    .children[2].innerText;

answered Apr 11, 2021 at 2:16

Robert Siemer

35.1k11 gold badges89 silver badges101 bronze badges

Comments

Matias · Accepted Answer · 2021-04-11 03:34:08Z

1

If you can't rely on getElmentById that means that you are doing something wrong, an id should be unique in the whole html. I suggest a new naming technique, you can concatenate the parent table id with the current row id. Example:

<table id="NorwegianCompanies">
  <tr><th>Name</th><th>Employees</th><th>Founded</th></tr>
  <tr id="NorwegianCompanies17"><td>Company G</td><td>105</td><td>1970</td></tr>
  <tr id="NorwegianCompanies18"><td>Company H</td><td>100</td><td>1980</td></tr>
  <tr id="NorwegianCompanies19"><td>Company I</td><td>45</td><td>2000</td></tr>
</table>

In that way you can simply call

 const row = document.getElementById(rowId)

edited Apr 11, 2021 at 3:34

user10563627

answered Apr 11, 2021 at 2:08

Matias

1,5203 gold badges10 silver badges14 bronze badges

Collectives™ on Stack Overflow

Get a specific row from specific table with JavaScript?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related