在 Javascript 中访问单元格文本答案

【问题标题】：Accessing cell text in Javascript在 Javascript 中访问单元格文本
【发布时间】：2010-02-15 15:19:50
【问题描述】：

当只有 <table> 元素有 ID 时，我试图更改表格单元格的文本，单元格上没有设置 ID，例如

<table id="test">
  <tbody>
    <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
    </tr>
  </tbody>
</table>

那么如何在不明确指定 ID 的情况下更改 Javascript 中第二个单元格（单元格 2）的文本？

谢谢，

AJ

【问题讨论】：

【解决方案1】：

使用 jQuery 真的很容易，但我假设您想使用原生 DOM 方法。在这种情况下，

document.getElementById('test').getElementsByTagName('td')[1]

会将您带到该表格中的第二个表格单元格。

【讨论】：

【解决方案2】：

使用jQuery，此任务将如下所示：

$('#test td:first').text('Your new text goes here');

我强烈推荐 jQuery。您可能还会收到其他推荐 jQuery 的回复。

【讨论】：

【解决方案3】：

类似的东西应该可以工作：

document.getElementById('test').childNodes[1].childNodes[1].childNodes[3].innerHTML='changed cell';

【讨论】：

【解决方案4】：

你可以用这个代码用纯 JS 做到这一点：

document.querySelector('#test td:nth-child(2)').innerHTML = 'value changed';

编辑

不幸的是，@Matt Ball 的代码更快，您可以在此处看到：JSPerf。

【讨论】：

【解决方案5】：

对我来说最明显的方法是像下面的代码那样做：

document.getElementById("test").rows[0].cells[1].innerHTML = "Cell not so 2."

如果您要处理大量数据，请不要使用 JQuery，因为它很慢。

您可以查看 JQuery 处理和本机 DOM here 之间的同情（如果您点击该帖子中的链接，该页面有一个图表显示差异有多大）。

【讨论】：