互斥列表单元

Question

I have 5 listcell when I click on one listcell the color of it should be changed to green, next time when I click of another listcell, the color of previous should be reset and newly clicked should become green.ie only one listcell can be green at one time.

5 listcell is just an example in actual case, the listcells are variable ie of any number. They are created at runtime and appended to listitem.I donnot have ID of the listcells. The html is send from server side. How can i achieve this using java script.

I want an generic solution. What actually happens in case of radio Groups, can provide hint to my question.

My Table (Confusing ? Code is not needed to address my question. added it beacuse of first comment on question):

<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>

Thanks,

Aman

Answer 1

css:

.selected { background: green }

js:

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

EDIT: Proof of concept http://jsfiddle.net/SKUqG/