Question

I have a HTML table as listed in http://jsfiddle.net/Lijo/sP7zD/. 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.

1. What jQuery code change need to be done in the script that I wrote?
2. What is the better way for reading the value of first column’s header?

CODE

<input type="submit" value="Alert" class="alertButton"/>


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


</tr>
<tr>
    <td>
        False
    </td>
    <td>
        Norman Tylor
    </td>
    <td>
        3450
    </td>
    <td>
        32
    </td>
</tr>
</table>

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>

​SCRIPT

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

​

Answer 1

Use $('th:first')

var selectedElements = $("th:first");

Here is the demo.

For your code: change to use eq instead.

var selectedElements = $("tr").find("th:eq(0)");