Get all th tags under thead only

thead border
table> <thead
javascript create table with thead and tbody
jquery find td under th
jquery find th of td
javascript access thead
jquery check if table has thead
get table header name in javascript

I have a simple html table, which containg thead, tbody and tfoot. I want to select using javascript or jquery all th tags only within the thead. So far, I found a way to get either all th in table or the thead itself.

My table:

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

My 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

I also tried the following code:

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

But as a result I couldn't really understand how to work with it... It's not an array, there's no foreach function to the headers object I get as a result, and I really couldn't find a way to reach the data.

Is there anyway to get just the th elements within the thead of a table?

Thanks

You can push all your text into an array:

var thArray = [];

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

Then retrieve it like this:

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

Demo

HTML thead tag, Note: The <thead> element must have one or more <tr> tags inside. Tip: The <​thead> , <tbody>, and <tfoot> elements will not affect the layout of the table by  The <thead> tag is used to group header content in an HTML table. The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer). Browsers can use these elements to enable scrolling of the table body independently of the header and footer.

You can do it like this;

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

OR

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

<tbody>: The Table Body element, Tag omission, The <tbody> element is not a required child element If you use <​tbody> , you can't also have table rows ( <tr> elements) All non-header and non-footer rows must be inside the <tbody> if one is used. Each may potentially have its own header row or rows; however, there can be only one  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

No Jquery 2018

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

<thead>: The Table Head element, The HTML thead element defines a set of rows defining the head of the columns of the table. 2. <caption>Council budget (in £) 2018</caption>. 3. <thead>. 4. <​tr> The end tag may be omitted if the <thead> element is immediately only implemented in some versions of Microsoft Internet Explorer: the  CSS properties and pseudo-classes that may be specially useful to style the <thead> element: the :nth-child pseudo-class to set the alignment on the cells of the column; the text-align property to align all cells content on the same character, like '.'.

Try

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

Is it required to use thead, tbody and tfoot tags?, > , you are grouping them without using ID or class. Allowing more style adjustments, such as fixed header and scroll-able body. The Tags panel allows you to view and edit tags in the logical structure tree, or tags tree, of a PDF. In the Tags panel, tags appear in a hierarchical order that indicates the reading sequence of the document. The first item in this structure is the Tags root. All other items are tags and are children of the Tags root.

With jQuery normal CSS selector such as $('#MyTbl thead th') works. But you can also use scoped selector. To use scoped selector, you mention the scope as second argument as

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

Here second argument thead provides the scope. See this fiddle for example

html tables: thead vs th, What is the thead tag used for thead content </ thead? CSS has properties to make any element you wish behave as if it was a table element. You'll need to structure them essentially as you would a table, and it will be subject to the same source-order-dependency as a table, but you can do it. I'm not crapping on it either, it's genuinely useful sometimes. If that layout style solves a problem and

Tables with irregular headers • Tables • WAI Web Accessibility , > , on the other hand, is used to style a specific cell as a header cell rather than an ordinary data cell. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

Tables in HTML documents, A table can have any number of <tbody> elements that each defines a row group. The second-level headers only apply to the corresponding column, so the scope multiple rows are correctly associated with all the cells in those rows, the rows <thead> <tr> <th scope="col">Poster name</th> <th scope="col">Color</​th>  A more complex HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody> elements. Note: Tables should not be used for page layout! Historically, some Web authors have misused tables in HTML as a way to control their page layout.

Create a table header using <thead></thead> and <th></th> tags , Note that the number of rows in a table is equal to the number of TR elements The TBODY start tag is always required except when the table contains only one Thus, if a table contains forty columns, all of which have a width of 20 pixels,  thead > tr:last-of-type > th:nth-of-type(1) { background-color: rgb(225, 255, 225); } thead > tr:last-of-type > th:nth-of-type(2) { background-color: rgb(255, 225, 225); } Here we dig into the last row of the table's header block and give the first header cell in it (the "Joined" header) a greenish color, and the second header cell in it (the "Canceled" header) a reddish hue.

Comments
  • Probably costed you more time to post the question than try solving your own problem. Good luck coding :)
  • hummm > is the parent child selector...you were using thead > th that will always return null asl long as there is no direct child which is TH.