Question

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

5 listcell只是实际情况中的一个例子，listcells是可变的，即任何数字。它们在运行时创建并附加到listitem。我没有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>

谢谢，

阿曼

Answer 1

的CSS：

.selected { background: green }

JS：

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

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

互斥列表单元

1 个答案: