Find table header cell value (First Column)
<p>I have a HTML table as listed in <a href="http://jsfiddle.net/Lijo/sP7zD/" rel="nofollow">http://jsfiddle.net/Lijo/sP7zD/</a>. I need to read the value of first column’s header.  I am doing it with “gt” and “lt” operators.  But it is not getting the first column value. </p>

<ol>
<li>What jQuery code change need to be done in the script that I wrote?</li>
<li>What is the better way for reading the value of first column’s header?</li>
</ol>

<p>CODE</p>

<pre><code>&lt;input type="submit" value="Alert" class="alertButton"/&gt;


&lt;table class="resultGridTable" cellspacing="0" id="detailContentPlaceholder_grdLocalTaxReport"
style="border-collapse: collapse;"&gt;
&lt;tr&gt;
    &lt;th scope="col"&gt;
        IsSummaryRow
    &lt;/th&gt;
    &lt;th scope="col"&gt;
        Associate
    &lt;/th&gt;
    &lt;th scope="col"&gt;
        Gross Amount
    &lt;/th&gt;
    &lt;th scope="col"&gt;
        Federal Withholding
    &lt;/th&gt;


&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;
        False
    &lt;/td&gt;
    &lt;td&gt;
        Norman Tylor
    &lt;/td&gt;
    &lt;td&gt;
        3450
    &lt;/td&gt;
    &lt;td&gt;
        32
    &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

&lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"&gt;&lt;/script&gt;
</code></pre>

<p>​SCRIPT</p>

<pre><code>$('.alertButton').click(function() {                                                  
    var selectedElements = $("tr").find("th:gt(0):lt(1)");
    $(selectedElements).css('background-color','yellow');
    alert(selectedElements.html());
});
</code></pre>

<p>​</p>
