如何使用jquery捕獲td元素中的值，並根據捕獲的td值更改另一個td元素背景顏色？

Question

今天我花了一些時間查看使用JQuery迭代表及其行的示例，經過大量的試驗，我能夠做到這一點。 但是我遇到了一個試圖從td元素中獲取值的問題，所以我可以改為另一個td元素的顏色。 我有一個轉發器綁定到數據表。 標記看起來像這樣..

<div>
<table id="Table">
    <tr>
        <th>Global Group
        </th>
        <th>Option ID
        </th>
    </tr>
    <tr>
        <asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
            <ItemTemplate>
                <tr align="left">
                    <td id="header">
                        <asp:Label ID="lblOptionName" runat="server" Text='<%#Eval("GlobalGroup_Name") %>'></asp:Label>
                    </td>
                    <td class="level"><%#Eval("GlobalGroup_Level")%></td>
                </tr>
            </ItemTemplate>
        </asp:Repeater>
    </tr>
</table>

最初我在td class = level中有一個標簽，我能夠在OnItemDataBound事件中突出顯示我想要的內容。 但我想用JQuery代替它。

這就是我提出來的......

$(document).ready(function () {
        $("#Table tr").each(function () {
            var cell = $(this).find("td.level").text();
            if (cell == "0") $("#header").css('background-color', 'purple');
        });
    })

這是表數據

Global Group     Option ID
floor                1
hardwood             1
parkay               1
handle               0
brass                1
stainless            1
nickel               1
door                 0
hardwood             1
steel                1
screen               1

等...我一直試圖做的是每次Option ID都是0，我希望它的匹配全局組有一個背景顏色... IE句柄的選項ID是0，所以有句柄的td元素應該更改背景顏色等等。

代碼正在做的只是向全局組下的第一個td元素添加背景顏色，但是您可以看到地板的選項ID是1並且不應該具有背景顏色。

那么有人可以指出我哪里出錯了嗎？

謝謝

Answer 1

BillPull是正確的，使你的標題成為ID是不錯的做法。 ID應該只在頁面上出現一次，嘗試將其作為一個類

要么

您可以使用jquery的.siblings（）。 您的代碼應該讀取與此類似的內容：

    var cell = $(this).find("td.level");
    if (cell.text() == "0") {
        cell.siblings('td').css('background-color', 'purple');
    }

示例： JFiddle

Answer 2

您想要更改同一tr中的header元素的背景，以便更改當前level元素

$(document).ready(function () {
    $("#Table tr").each(function () {
        var cell = $(this).find("td.level").text();
        if (cell == "0") {
            $(this).find(".header").css('background-color', 'purple');
        }
    });
})

此外，由於元素的ID必須是唯一的，因此請將header用作類

<tr align="left">
    <td class="header">
        <asp:Label ID="lblOptionName" runat="server" Text='<%#Eval("GlobalGroup_Name") %>'></asp:Label>
    </td>
    <td class="level">
        <%#Eval( "GlobalGroup_Level")%>
    </td>
</tr>

在您的代碼中，由於您使用id選擇器來查找header元素，因此它將始終返回帶有ID header的第一個元素