使用 JavaScript 从特定 table 获取特定行？

Question

假设我的动态 HTML 看起来像这样：

<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>

每个 tr 都有一个 ID，但 ID 仅对 table 相对唯一，因为其他 table 可能有 ID，并且行数可能会有所不同。

如何获取 ID 为 17 的瑞典公司的成立年份（第 2 列）？

我想你会这样做，但我找不到正确的代码。

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

我不能仅使用 getElementById 来获取 ID“17”，因为我会冒着获取丹麦语或挪威语公司的风险，因为这些 table 的顺序是随机的。

Answer 1

你只是没有使用正确的选择器，

#DanishCompanies tr[id="17"]

将为您提供 ID 为 17 的 tr，它是 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>

Answer 2

这样（带有数字值的 id 使 css select 语法复杂化）

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>

Answer 3

如果你不能依赖getElmentById那就意味着你做错了，一个id在整个html中应该是唯一的。我建议一种新的命名技术，您可以将父 table id 与当前行 id 连接起来。示例：

<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>

这样你就可以简单地调用

 const row = document.getElementById(rowId)

Answer 4

在页面中重复使用相同的 id 值是无效的 HTML。您可以为此使用私有 data-... 属性。

除此之外，下一行获取第三个子节点（在本例中为第三列）的人类可读文本，即年份（作为字符串）。

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

使用 JavaScript 从特定 table 获取特定行？

Get a specific row from specific table with JavaScript?

html

javascript

css-tables