定位表的第二个元素子的内部html

Question

我正在尝试定位表格的第二个子元素。在这种情况下，我想写这行的第二个单元格的内部HTML，即＃34; Travolta。＆＃34;我已成功使用firstChildElement和lastChildElement，但无法定位第二个。任何帮助，将不胜感激！示例代码可以在下面找到：

HTML：

  <tr class="table-row">
      <td>John</td>
      <td>Travolta</td>
      <td>j.travolta@gmail.com</td>
    </tr>    

使用Javascript：

var rowTag = document.getElementsByClassName("table-row");

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

- ＆GT;返回＆＃34;约翰＆＃34;

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

- ＆GT;返回＆＃34; j.travolta@gmail.com"

Answer 1

因为它是第二个元素子元素，所以可能使用children[1]（它是一个基于0的集合）：

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

请注意，现代浏览器支持firstElementChild和children，但如果您必须支持IE8，那么您仍然需要编写一个函数来跳过非元素节点。

Answer 2

也许rowTag[0].firstElementChild.nextElementSibling.innerHTML

Answer 3

像这样获取innerHTML

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

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

Answer 4

有一个CSS选择器，nth-child（）。 只需将子编号放在括号内。 使用JQuery，这将解决您的问题： $('tr.table-row>td:nth-child(2)')是一个直接的选择器，可以使用JQuery检索所需的元素。设置HTML只需使用html()函数，如下所示：

$("tr.table-row>td:nth-child(2)").html("SET HTML HERE");