0

我有5个listcell，当我点击一个listcell时，它的颜色应该变成绿色，下次当我点击另一个listcell时，以前的颜色应该被重置，新点击的应该变成绿色。即只有一个listcell可以是绿色一次。

5 listcell 只是实际情况的一个例子，listcells 是可变的，即任意数量。它们在运行时创建并附加到列表项。我没有列表单元的 ID。html是从服务器端发送的。我如何使用 java 脚本来实现这一点。

我想要一个通用的解决方案。在无线电组的情况下实际发生的情况可以为我的问题提供提示。

我的表（令人困惑？不需要代码来解决我的问题。添加它是因为对问题的第一个评论）：

<TABLE style="TABLE-LAYOUT: fixed" id=d0DQ35-cave border=0 cellSpacing=0
cellPadding=0 width="100%">
<TBODY style="HEIGHT: 0px; VISIBILITY: hidden">
    <TR id=d0DQ45-bdfaker class=z-listbox-faker>
        <TH style="WIDTH: 222px" id=d0DQ55-bdfaker class=z-listheader>
            <DIV style="OVERFLOW: hidden"></DIV>
        </TH>
        <TH style="WIDTH: 161px" id=d0DQ65-bdfaker class=z-listheader>
            <DIV style="OVERFLOW: hidden"></DIV>
        </TH>
        <TH style="WIDTH: 161px" id=d0DQ75-bdfaker class=z-listheader>
            <DIV style="OVERFLOW: hidden"></DIV>
        </TH>
        <TH style="WIDTH: 161px" id=d0DQ85-bdfaker class=z-listheader>
            <DIV style="OVERFLOW: hidden"></DIV>
        </TH>
        <TH style="WIDTH: 161px" id=d0DQ95-bdfaker class=z-listheader>
            <DIV style="OVERFLOW: hidden"></DIV>
        </TH>
        <TH id=d0DQ45-bdfakerflex></TH>
    </TR>
</TBODY>
<TBODY id=d0DQ35-tpad>
    <TR style="HEIGHT: 0px"></TR>
</TBODY>
<TBODY id=d0DQ35-rows>
    <TR id=d0DQa5 class=z-listitem>
        <TD id=d0DQb5 class=z-listcell>
            <DIV id=d0DQb5-cave class="z-listcell-cnt z-overflow-hidden">
                <SPAN id=d0DQa5-cm class="z-listitem-img z-listitem-img-checkbox"></SPAN><SPAN
                    style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
                    id=d0DQl5 class=z-label>LABEL</SPAN>
            </DIV>
        </TD>
        <TD id=d0DQm5 class=z-listcell>
            <DIV id=d0DQm5-cave class="z-listcell-cnt z-overflow-hidden">
                <SPAN
                    style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
                    id=d0DQn5 class=z-label>5</SPAN>
            </DIV>
        </TD>
        <TD id=d0DQo5 class=z-listcell>
            <DIV id=d0DQo5-cave class="z-listcell-cnt z-overflow-hidden">
                <SPAN
                    style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
                    id=d0DQp5 class=z-label>5 (100.0%)</SPAN>
            </DIV>
        </TD>
        <TD id=d0DQx9 class=z-listcell>
            <DIV id=d0DQx9-cave class="z-listcell-cnt z-overflow-hidden">
                <SPAN
                    style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
                    id=d0DQy9 class=z-label>5 (100.0%)</SPAN>
            </DIV>
        </TD>
        <TD id=d0DQ_a class=z-listcell>
            <DIV id=d0DQ_a-cave class="z-listcell-cnt z-overflow-hidden">
                <SPAN
                    style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
                    id=d0DQ1a class=z-label>0 (0.0%)</SPAN>
            </DIV>
        </TD>
    </TR>
    <TR id=d0DQe9 class="z-listitem z-listbox-odd">
        <TD id=d0DQn1 class=z-listcell>
            <DIV id=d0DQn1-cave class="z-listcell-cnt z-overflow-hidden">
                <SPAN id=d0DQe9-cm class="z-listitem-img z-listitem-img-checkbox"></SPAN><SPAN
                    style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
                    id=d0DQo1 class=z-label>ID</SPAN>
            </DIV>
        </TD>
        <TD id=d0DQp1 class=z-listcell>
            <DIV id=d0DQp1-cave class="z-listcell-cnt z-overflow-hidden">
                <SPAN
                    style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
                    id=d0DQq1 class=z-label>5</SPAN>
            </DIV>
        </TD>
        <TD id=d0DQr1 class=z-listcell>
            <DIV id=d0DQr1-cave class="z-listcell-cnt z-overflow-hidden">
                <SPAN
                    style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
                    id=d0DQs1 class=z-label>5 (100.0%)</SPAN>
            </DIV>
        </TD>
        <TD id=d0DQt1 class=z-listcell>
            <DIV id=d0DQt1-cave class="z-listcell-cnt z-overflow-hidden">
                <SPAN
                    style="COLOR: blue; CURSOR: pointer; TEXT-DECORATION: underline"
                    id=d0DQu1 class=z-label>5 (100.0%)</SPAN>
            </DIV>
        </TD>
        <TD id=d0DQv1 class=z-listcell>
            <DIV id=d0DQv1-cave class="z-listcell-cnt z-overflow-hidden">
                <SPAN
                    id=d0DQw1 class=z-label>0 (0.0%)</SPAN>
            </DIV>
        </TD>
    </TR>
</TBODY>
<TBODY id=d0DQ35-bpad>
    <TR style="HEIGHT: 0px"></TR>
</TBODY>
<TBODY style="DISPLAY: none" id=d0DQ35-empty class=z-listbox-empty-body>
    <TR>
        <TD colSpan=5>No Columns Selected!</TD>
    </TR>
</TBODY>
</TABLE>

谢谢，

阿曼

4

1 回答 1

0

CSS：

.selected { background: green }

js：

$('td').click(function () {
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
});

编辑：概念证明http://jsfiddle.net/SKUqG/

于 2012-08-01T08:01:51.403 回答