Javascript 仅在AD下获取所有th标签

我有一个简单的html表，其中包含thead、tbody和tfoot。 我想选择仅在thead中使用javascript或jquery所有th标记。 到目前为止，我找到了一种方法，要么把所有的th都放在表中，要么把THAD本身放在表中

我的桌子：

        <table id="MyTbl" class="display">
                <thead>
                    <tr>
                        <th>
                            ID
                        </th>
                        <th>
                            Name
                        </th>
                        <th>
                            Desc
                        </th>
                    </tr>
                </thead>
                <tbody id="MyTableBody">
                </tbody>
                <tfoot>
                    <tr height="27px">
                        <th class="TDHMain">
                            FILTER ID
                        </th>
                        <th class="TDHMain">
                            FILTER NAME
                        </th>
                        <th class="TDHMain">
                            FILTER DESC
                        </th>
                    </tr>
                </tfoot>
            </table>

我还尝试了以下代码：

headers = $('#MyTbl').find('thead > th').get();

但结果我真的不明白如何使用它。。。它不是一个数组，因此我得到的headers对象没有foreach函数，我真的找不到访问数据的方法

在一个表的thead中是否有只获取th元素的方法

---

谢谢

你可以这样做

$('#MyTbl thead').find('th');

或

$('#MyTbl thead th').each(function() {
    // Your code per th here
});

试一试

哦!！我错过了“tr”

我用以下方法解决了这个问题：

headers = $('#MyTbl').find('thead > tr > th').get();

---

您可以将所有文本推送到一个数组中：

var thArray = [];

$('#MyTbl > thead > tr > th').each(function(){
    thArray.push($(this).text())
})

然后像这样检索它：

thArray[0]; // This will give you ID

---

处理此问题的更简单方法

   <table id="table1">
                    <thead>
                        <tr>
                            <th style='width: 80px'>Mon</th>
                            <th style='width: 80px'>Tue</th>
                            <th style='width: 80px'>Wed</th>
                            <th style='width: 80px'>Thr</th>
                            <th style='width: 80px'>Fri</th>
                            <th style='width: 80px'>Sat</th>
                            <th style='width: 80px'>Sun</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <td></td>
                        </tr>
                    </tfoot>
                    <tbody>
                    </tbody>
                </table>
    <script>
        $(document).ready(function () {
          test(  $('#table1'));
        });
       function test(table) {
            $.each($(table).find("th"), function (key, val2) {
                alert(val2.innerHTML);
                alert($(val2).html());
       });
    }
    </script>

周一
星期二
结婚
苏氨酸
星期五
坐
太阳
$（文档）.ready（函数（）{
测试（$（'表1'））；
});
功能测试（表）{
$.each（$（表）.find（“th”），函数（键，val2）{
警报（val2.innerHTML）；
警报（$（val2.html（））；
});
}

无Jquery 2018

let headers = document.querySelectorAll("#myTbl > thead > tr > th")

---

使用jQuery常规CSS选择器，例如

$（'MyTbl thead th'）

可以工作。但也可以使用作用域选择器。要使用作用域选择器，请将作用域作为第二个参数

$（'th'，'thead'）.css（'color'，'red'）

这里第二个参数
thead
提供了作用域。
举个例子看
发布问题可能比解决自己的问题花费更多的时间。祝您好运编码：）hummm>是父子选择器…您使用的是ad>th，只要没有直接的子对象是th，它将始终返回null。
   <table id="table1">
                    <thead>
                        <tr>
                            <th style='width: 80px'>Mon</th>
                            <th style='width: 80px'>Tue</th>
                            <th style='width: 80px'>Wed</th>
                            <th style='width: 80px'>Thr</th>
                            <th style='width: 80px'>Fri</th>
                            <th style='width: 80px'>Sat</th>
                            <th style='width: 80px'>Sun</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <td></td>
                        </tr>
                    </tfoot>
                    <tbody>
                    </tbody>
                </table>
    <script>
        $(document).ready(function () {
          test(  $('#table1'));
        });
       function test(table) {
            $.each($(table).find("th"), function (key, val2) {
                alert(val2.innerHTML);
                alert($(val2).html());
       });
    }
    </script>

let headers = document.querySelectorAll("#myTbl > thead > tr > th")