如何使用jquery捕获td元素中的值，并根据捕获的td的值更改其他td元素的背景色？

Chris 发表于 Dev

克里斯

今天，我花了一些时间查看一些示例，这些示例使用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

等等...我一直想做的是每次选项ID为0时，我要为其匹配的全局组使用背景色... IE句柄的选项ID为0，因此应该在其中包含句柄的td元素更改其背景颜色等等。

该代码正在执行的操作只是在Global Group下的第一个td元素中添加背景色，但是您可以看到floor的Option ID为1，并且不应具有背景色。

有人可以指出我要去哪里了吗？

谢谢

阿伦·P·约翰尼

您想要更改与当前元素header相同的元素的背景，以便trlevel

$(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选择器来查找标头元素，因此它将始终返回具有ID的第一个元素 header

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。