使用 JavaScript 从特定表中获取特定行？

编程问答 2022-05-14

问题描述

假设我的动态 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 只是表相对唯一的，因为其他表可能有 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”，因为我冒着获得丹麦或挪威公司的风险，因为这些表的顺序是随机的。

解决方法

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

#DanishCompanies tr[id="17"]

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

,

这种方式（带有数字值的 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>

,

如果您不能依赖 getElmentById 这意味着您做错了什么，那么 id 在整个 html 中应该是唯一的。我建议使用一种新的命名技术，您可以将父表 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)
,

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

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

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