I am trying to get header text in array, however with following I am getting value plus th tag i.e [<th>value1</th>, <th>value2</th>], I want to get [value1, value2].

$('#header').children().each(function(){this.html});

Here is how my HTML looks like:

<tr bgcolor="#cdb79e" id="header">
    <th>Origin Code</th>
    <th>Description</th>
    <th>Notes</th>
    <th>Domain</th>
    <th>Tier</th>
    <th>Engine</th>
    <th>Network</th>
    <th>Platform</th>
    <th>Expansion Tool</th>
    <th>Date</th>
    <th>Imps</th>
    <th>Clicks</th>
    <th>Engine CTR</th>
    <th>Average Position</th>
    <th>Picks</th>
    <th>LP CTR</th>
    <th>GSL Picks</th>
    <th>GSL LP CTR</th>
    <th>Merchant Picks</th>
    <th>Merchant LP CTR</th>
    <th>CPC</th>
    <th>RPC</th>
    <th>RPP</th>
    <th>Cost</th>
    <th>Total Rev</th>
    <th>Margin</th>
    <th>ROI</th>
</tr>

I am trying to get header text in array, however with following I am getting value plus th tag i.e [<th>value1</th>, <th>value2</th>], I want to get [value1, value2].

$('#header').children().each(function(){this.html});

Here is how my HTML looks like:

<tr bgcolor="#cdb79e" id="header">
    <th>Origin Code</th>
    <th>Description</th>
    <th>Notes</th>
    <th>Domain</th>
    <th>Tier</th>
    <th>Engine</th>
    <th>Network</th>
    <th>Platform</th>
    <th>Expansion Tool</th>
    <th>Date</th>
    <th>Imps</th>
    <th>Clicks</th>
    <th>Engine CTR</th>
    <th>Average Position</th>
    <th>Picks</th>
    <th>LP CTR</th>
    <th>GSL Picks</th>
    <th>GSL LP CTR</th>
    <th>Merchant Picks</th>
    <th>Merchant LP CTR</th>
    <th>CPC</th>
    <th>RPC</th>
    <th>RPP</th>
    <th>Cost</th>
    <th>Total Rev</th>
    <th>Margin</th>
    <th>ROI</th>
</tr>

• javascript
• jquery

• You could strip the tags using regex, but that would not be very pretty. Feels like there should be a better alternative. – Anders Commented Jul 17, 2015 at 21:04
• What does the HTML look like? – Anders Commented Jul 17, 2015 at 21:05
• You could use $(this).html() - see this JSFiddle. The html() method uses the innerHTML property and should not return any outer tags. – Anders Commented Jul 17, 2015 at 21:11

1 Answer 1

Assuming your HTML were to look something like this:

<table>
    <thead>
        <tr id='header'>
            <th>Value1</th>
            <th>Value2</th>
        </tr>
    </thead>
</table>

You could use something like this to build an array of the <th> elements' text:

var headerArray = [];
$('#header').children().each(function(){
    headerArray.push($(this).text());
});
console.log(headerArray);