javascript 查找表格标题单元格值（第一列）

Find table header cell value (First Column)

提问by LCJ

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.

我有一个 HTML 表，如http://jsfiddle.net/Lijo/sP7zD/ 中所列。我需要读取第一列标题的值。我是用“gt”和“lt”运算符来做的。但它没有获得第一列值。

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?

1. 我编写的脚本中需要进行哪些 jQuery 代码更改？
2. 读取第一列标题值的更好方法是什么？

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());
});

?

?

采纳答案by xdazz

Use $('th:first')

利用 $('th:first')

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

Here is the demo.

这是演示。

For your code: change to use eqinstead.

对于您的代码：改为使用eq。

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

回答by grc

To answer question 1, your code tries to find the element with an index greater than 0, so it finds the second. Try removing the gt. This will find the element with an index less than 1, so it will match the element with an index of 0.

要回答问题 1，您的代码会尝试查找索引大于 0 的元素，因此它会找到第二个元素。尝试删除gt. 这将找到索引小于 1 的元素，因此它将匹配索引为 0 的元素。

var selectedElements = $("tr").find("th:lt(1)");

But there are better ways of doing this, as mentioned in other answers.

但是，正如其他答案中所述，有更好的方法可以做到这一点。

回答by Codegiant

Try this

试试这个

HTML CODE

HTML代码

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

JS CODE

代码

$('.alertButton').click(function()
    {                                                 
        var selectedElements = $('th').first();
            alert(selectedElements .text());
        selectedElements.css({'background':'yellow'});                 
});

DEMO

演示

回答by codingbiz

Use var selectedElements = $(".resultGridTable").find("tr:first").find('th:first');

利用 var selectedElements = $(".resultGridTable").find("tr:first").find('th:first');

$('.alertButton').click(function()
{

var selectedElements = $(".resultGridTable").find("tr:first").find('th:first');
    $(selectedElements).css('background-color','yellow');
    alert(selectedElements.html());


});

?

?