title: Find table header cell value (First Column)
body: <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>