TR表的获取子元素

Question

我需要使用香草javascript到达具有父ID的child表元素的child。所以本质上，我想获取tr元素的第三行

<table>
<tr id="support">
  <td></td>
  <td></td>
  <td>Yes</td> (get this row)
</tr>
</table>

Answer 1

您可以将nth-child与选择器var element = document.querySelector('#support > td:nth-child(3)'); var text = element.textContent; console.log(text);一起使用，如下所示：

<table>
<tr id="support">
  <td></td>
  <td></td>
  <td>Yes</td>
</tr>
</table>

this.state.articles

Answer 2

您可以按照以下方式尝试使用querySelectorAll()：

var text = document.querySelectorAll('#support > td')[2].textContent;
console.log(text);

<table>
  <tr id="support">
    <td></td>
    <td></td>
    <td>Yes</td>
  </tr>
</table>

从小提琴中更新： td 中没有 value 属性，访问 textcontent 属性就足够了。您还必须将id作为字符串传递。

var val = document.querySelectorAll('#isWebRTCSupported > td')[2].textContent.trim();

if( val == "Yes"){
  document.getElementById('id').style.display = 'block';
}
else if( val == "No"){
  document.getElementById('id2').style.display = 'block';
}

#id, #id2 {
  display: none;
}

<table>
  <tr id="isWebRTCSupported">
    <td></td>
    <td></td>
    <td>Yes</td>
  </tr>
</table>
<div id="id">
  Working
</div>
<div id="id2">
  Not Working but working :)
</div>