从表中获取所有第一个子元素答案

【问题标题】：Fetch all first child elements from a table从表中获取所有第一个子元素
【发布时间】：2017-03-31 06:40:23
【问题描述】：

非常简单，我需要获取所有第一种类型的元素文本：

<html>
<body>

  <table>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
  </tr>
  <tr>
    <td>Line #1</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Line #2</td>
    <td>SLD</td>
    <td>68</td>
  </tr>
  <tr>
    <td>Line #3</td>
    <td>MDK</td>
    <td>68</td>
  </tr>
</table> 

<script type="text/javascript">

console.log(document.querySelectorAll('table tr td:first-of-type'));

</script>

</body>
</html>

我希望能够获取所有表 tr td:first-of-type innertext...这里需要进行一些小调整。

【问题讨论】：

您问的问题是否正确。您提供的代码中只有一个“table tr th:first-child”。其余的是 'td'。
编辑到 td :)
你的 td 和 th 没有子元素。你觉得th:first-of-type？
不是正确的语法，只是为了获得想法 console.log(document.querySelectorAll('table tr td:first-of-type').innertext); （纯js没有jquery）
那么问题出在哪里？

标签： javascript html html-table selectors-api

【解决方案1】：

我以某种方式解决了它...跟踪和错误...谢谢:)

<html>

<body>

    <table>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
        </tr>
        <tr>
            <td>Line #1</td>
            <td>MKD</td>
            <td>68</td>
        </tr>
        <tr>
            <td>Line #2</td>
            <td>SLD</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Line #3</td>
            <td>HAD</td>
            <td>53</td>
        </tr>
        <tr>
            <td>Line #4</td>
            <td>LRD</td>
            <td>49</td>
        </tr>
    </table>

    <script type="text/javascript">
        var theFirstChilds = document.querySelectorAll('table tr td:first-of-type');
        var i;

        for (i = 0; i < theFirstChilds.length; ++i) {
            console.log(theFirstChilds[i].innerText);
        }
    </script>

</body>

</html>

【讨论】：

单行制作console.log.apply(null, Array.prototype.map.call(document.querySelectorAll('table tr td:first-of-type'), function(x){return x.innerText;})).

【解决方案2】：

我想这就是你的意思

document.querySelectorAll('table tr td:first-child')

【讨论】：

【解决方案3】：

table tr td:first-child

正如 Dan Philip 所说，您需要像下面这样调整您的 HTML。

<table>
  <tr>
    <td>Line #1</td>
    <td>Lastname</td>
    <td>Age</td>
  </tr>
  <tr>
    <td>Line #2</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Line #3</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

这是一个使用 jquery 的 Codepen.io 示例（只是为了说明）：

https://codepen.io/wykydtronik/pen/yMGMYw

$( "table tr td:first-child" )
  .css( "text-decoration", "underline" )
  .hover(function() {
    $( this ).addClass( "gogreen" );
  }, function() {
    $( this ).removeClass( "gogreen" );
  });

var theFirstChilds = document.querySelectorAll('table tr td:first-child');

console.log(theFirstChilds[0]);
console.log(theFirstChilds[1]);
console.log(theFirstChilds[2]);

请注意，jQuery 只是您尝试做的一个示例。在 codepen 上，您可以打开底部的控制台以查看从节点存储的对象。

【讨论】：