html - Get a specific row from specific table with JavaScript?

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 pany 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 pany because the order of these tables is random.

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 pany 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 pany because the order of these tables is random.

Share Improve this question edited Apr 11, 2021 at 3:33 user10563627 asked Apr 11, 2021 at 1:51 Chlodio 2191 gold badge3 silver badges10 bronze badges

2 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 Commented Apr 11, 2021 at 2:04

Add a ment |

4 Answers 4

Sorted by: Reset to default 5

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>

this way (id with number values plicates 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>

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;

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)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - Get a specific row from specific table with JavaScript? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)