jquery - 如何使用 jquery 捕获 td 元素中的值并根据捕获的 td 值更改另一个 td 元素的背景颜色？

Question

我今天花了一些时间查看使用 JQuery 遍历表及其行的示例，经过大量试验后我能够做到这一点。但是我在尝试从 td 元素获取值时遇到问题，因此我可以更改为另一个 td 元素的颜色。我有一个绑定(bind)到数据表的中继器。标记看起来像这样..

<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

等等...我一直在尝试做的是每次选项 ID 为 0 时，我想为其匹配的全局组设置背景颜色...I.E 句柄的选项 ID 为 0，因此其中具有句柄的 td 元素应该具有其背景颜色改变等等。

代码所做的只是向 Global Group 下的第一个 td 元素添加背景色，但如您所见，floor 的选项 ID 为 1，不应该有背景色。

那么有人可以指出我哪里出错了吗？

谢谢

Answer 1

BillPull 是正确的，将您的 header 设为 ID 不是一个好习惯。 ID 应该在页面上只出现一次，尝试将其设为类

或

您可以使用 jquery 的 .siblings()。你的代码应该是这样的:

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

示例:JFiddle