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

Question

很简单，我需要获取所有第一种元素th的文本：

<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 ...这里需要进行一些小的调整。

Answer 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>

Answer 2

我想这就是你的意思

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

Answer 3

表tr td：第一个孩子

正如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上，您可以打开底部的控制台，以查看从节点存储的对象。

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

问题描述

3 个解决方案

解决方案1
1 2017-03-31 07:14:07

解决方案2
0 2017-03-31 06:46:41

解决方案3
0 2017-03-31 06:57:07

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

问题描述

3 个解决方案

解决方案1 1 2017-03-31 07:14:07

解决方案2 0 2017-03-31 06:46:41

解决方案3 0 2017-03-31 06:57:07

解决方案1
1 2017-03-31 07:14:07

解决方案2
0 2017-03-31 06:46:41

解决方案3
0 2017-03-31 06:57:07