0

1 つのリストセルをクリックすると 5 つのリストセルがあり、その色は緑に変わります。次に別のリストセルをクリックすると、前の色がリセットされ、新しくクリックされたリストセルが緑になります。つまり、1 つのリストセルだけが緑になります。一度に。

5 listcell は実際の例にすぎません。listcells は変数、つまり任意の数です。それらは実行時に作成され、listitem に追加されます。リストセルの 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 に答える