javascript - 仅获取标题下的所有标签

Question

我有一个简单的 html 表，其中包含 thead、tbody 和 tfoot。我想只在thead中使用javascript或jquery选择所有标签。到目前为止，我找到了一种方法来获取表格中的所有内容或 thead 本身。

我的桌子：

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

我的JavaScript：

var table = document.getElementById('MyTbl');
var tableHeader = table.getElementsByTagName('thead');
var headers = tableHeader.getElementsByTagName('th'); //This one doesn't work. No such a method for the thead tag

我还尝试了以下代码：

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

但结果我无法真正理解如何使用它......它不是一个数组，我得到的 headers 对象没有 foreach 函数，我真的找不到获取数据的方法.

有没有办法只得到表格中的第 th 个元素？

谢谢

score 10 · Accepted Answer

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

var thArray = [];

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

然后像这样检索它：

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

演示

score 3 · Accepted Answer

3

没有 jQuery 2018

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

于 2018-12-13T10:15:01.487 回答

score 2 · Accepted Answer

你可以这样做；

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

或者

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

score 2 · Accepted Answer

2

尝试

var tableHead = $('#MyTbl thead tr th');

于 2013-04-08T07:57:32.513 回答

score 2 · Accepted Answer

使用 jQuery 正常的 CSS 选择器等$('#MyTbl thead th')作品。但是您也可以使用范围选择器。要使用范围选择器，您将范围作为第二个参数提及为

$('th','thead').css('color','red');

这里第二个参数thead提供了范围。例如看这个小提琴

score 0 · Accepted Answer

哦！我错过了“tr”。

我通过以下方式解决了它：

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

score 0 · Accepted Answer

更简单的方法来处理这个问题

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

javascript - 仅获取标题下的所有标签

7 回答 7

Related

Reference