Javascript 从表中获取所有第一个子元素_Javascript_Html_Html Table_Selectors Api

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

javascript html

Javascript 从表中获取所有第一个子元素,javascript,html,html-table,selectors-api,Javascript,Html,Html Table,Selectors Api,非常简单，我需要获取所有第一种类型的th元素文本： <html> <body> <table> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> <tr> <td>Line #1</td> <td>Smith</td&

非常简单，我需要获取所有第一种类型的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>


1.
2.
3.
第1行
史密斯
50
第2行
SLD
68
第3行
MDK
68
log（document.querySelectorAll（'table tr td:first of type'）；

我希望能够获取innertext类型的所有表tr td:first。。。这里需要小小的调整。

我想这就是你的意思

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

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

我以某种方式解决了这个问题。。。跟踪和错误。。。谢谢：）


A.
B
C
第1行
MKD
68
第2行
SLD
32
第3行
有
53
第4行
LRD
49
var theFirstChilds=document.querySelectorAll（'table tr td:first of type'）；
var i；
对于（i=0；i

您问的问题是否正确。在您提供的代码中只有一个“表tr th:first child”。其余为“td”。编辑为td:）您的td和th没有子元素。您是否考虑过

th:first of type

？不是正确的语法，只是为了得到idea console.log（document.queryselectoral（'table tr td:first of type'）.innertext）；（纯js没有jquery）那么问题是什么呢？在单行

console.log.apply（null，Array.prototype.map.call（document.queryselectoral（'table tr td:first of type'），函数（x）{return x.innerText；}））

。

$( "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]);

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