Question

我有一个简单的html表，它包含thead，tbody和tfoot。我想在thead中选择使用javascript或jquery所有th标签。到目前为止，我找到了一种方法来获得表格中的全部内容或者自己的内容。

我的表：

        <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();

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

反正是否只能获得表格中的元素？

由于

Answer 1

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

var thArray = [];

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

然后像这样检索它：

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

Demo

Answer 2

你可以这样做;

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

或

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

Answer 3

尝试

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

Answer 4

没有Jquery 2018

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

Answer 5

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

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

此处第二个参数thead提供了范围。例如，请参见此fiddle

Answer 6

哦，哦！我错过了“tr”。

我通过以下方式解决了这个问题：

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

Answer 7

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

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

获取thead下的所有标签

7 个答案: