在Javascript中访问单元格文本

Question

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

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

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

谢谢，

AJ

Answer 1

使用jQuery非常容易，但我假设您要使用本机DOM方法。在那种情况下，

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

将转到该表中的第二个表格单元格。

https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

Answer 2

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

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

我强烈推荐jQuery。您可能还会获得推荐jQuery的其他响应。

Answer 3

这样的事情应该有效：

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

Answer 4

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

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

http://www.w3schools.com/jsref/coll_table_cells.asp

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

你可以看看JQuery处理和原生DOM here之间的同情心（如果你在该帖子中关注链接，该页面会有一个显示差异有多大的图表）。

Answer 5

您可以使用此代码使用纯JS执行此操作：

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

浏览器对此的支持非常神：http://caniuse.com/#search=querySelector

修改

不幸的是， @Matt Ball的代码更快，如您所见：JSPerf。