Javascript 以表的第二个元素子元素的内部html为目标

我正试图以表的第二个子元素为目标。在本例中，我希望编写该行第二个单元格的内部HTML，即“Travolta”。我成功地使用了firstChildElement和lastChildElement，但在定位第二个单元格时遇到了困难。任何帮助都将不胜感激！示例代码如下所示：

HTML:

-->返回“John”

---

-->返回“j”。travolta@gmail.com“

也许

行标记[0].firstElementChild.nextElementSibling.innerHTML

有一个CSS选择器，nth-child（）。 只需将子编号放在括号内即可。 使用JQuery，以下是解决问题的方法：

$（'tr.table-row>td:nth child（2）

是一个使用JQuery检索所需元素的简单选择器。要设置其HTML，只需像下面这样使用

HTML（）

函数：

$（“tr.table-row>td:nth child（2）”）.html（“在此处设置html”）

因为它是第二个元素子元素，所以可以使用

子元素[1]

（它是一个基于0的集合）：

---

请注意，现代浏览器支持

firstElementChild

和

children

，但如果必须支持IE8，则必须编写一个函数来跳过非元素节点。

像这样获取innerHTML

var tr = document.getElementsByClassName('table-row');

alert(tr[0].getElementsByTagName('td')[1].innerHTML);

---

如果

[“表行”]

应该是

（“表行”）

行标记[0]。单元格[1]。innerHTML；请尝试为第二个td分配一个id，或者将第二个单元格设置为.cells[2].innerHTML.You's correct@j08691，应该是括号，我的错误。将编辑注释以避免混淆。

nextElementSibling

。

nextSibling

可以是一个文本节点。当注意到类似这样的小问题时，可以编辑答案。我不想直接跳进去做，虽然现在回想起来我不确定为什么不…但我不想编辑它，所以它与已经发布的另一个答案相同。工作很有魅力，谢谢TJ！document.write（rowTag[0].children[1].innerhtml）返回了“Travolta”，如上面的示例所示。元素的样式设置将如何检索内容？@j08691

$（'tr.table-row>td:nth child（2）

是一个使用JQuery检索所需元素的简单选择器。它是一个CSS选择器并不意味着样式就是它所能使用的全部。在那之后设置它的HTML是很简单的。只需像这样使用

html（）

函数：

$（'tr.table-row>td:nth child（2）'）.html（“在此处设置html”）。您的答案在编辑之前，既没有提到也没有包含任何jQuery。此外，这个问题没有加上jQuery或关于jQuery的标签。@j08691希望我的解释能帮助您理解我的答案。
var rowTag = document.getElementsByClassName("table-row");

document.write(rowTag[0].firstElementChild.innerHTML);

document.write(rowTag[0].lastElementChild.innerHTML);

var text = rowTag[0].children[1].innerHTML;

var tr = document.getElementsByClassName('table-row');

alert(tr[0].getElementsByTagName('td')[1].innerHTML);