0

各行にチェックボックスを含む次の表があります。チェックボックスのステータスが変更された場合 (チェックされている/チェックされていない)、対応する行を黄色で強調表示する必要があります。jQueryを使用してどのようにそれを達成できますか?

注: jQuery 1.4.1を使用していますか? 「オン」はサポートされていません。

注: jQuery を学習しようとしています。サードパーティのプラグインを提案しないでください。手でコーディングして学習しようとしています。

<html>
<table class="commonGrid" cellspacing="0" id="detailContentPlaceholder_grdGarnishmentState"
style="border-collapse: collapse;">
<thead>
    <tr>
        <th scope="col">
            <a >
                Country Code</a>
        </th>
        <th scope="col">
            <a >
                State</a>
        </th>
        <th scope="col">
            Independent Order Status
        </th>
        <th scope="col">
            Standard Order Status
        </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            USA
        </td>
        <td>
            <span id="detailContentPlaceholder_grdGarnishmentState_lblState_0">Alaska</span>
        </td>
        <td>
            <span class="independantOrder">
                <input id="detailContentPlaceholder_grdGarnishmentState_chkIndependentOrderStatus_0"
                    type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl02$chkIndependentOrderStatus"
                    checked="checked" /></span>
        </td>
        <td>
            <span class="standardOrder">
                <input id="detailContentPlaceholder_grdGarnishmentState_chkStandardOrderStatus_0"
                    type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl02$chkStandardOrderStatus"
                    checked="checked" /></span>
        </td>
    </tr>
    <tr style="background-color: #E5E5E5;">
        <td>
            USA
        </td>
        <td>
            <span id="detailContentPlaceholder_grdGarnishmentState_lblState_1">Arkansas</span>
        </td>
        <td>
            <span class="independantOrder">
                <input id="detailContentPlaceholder_grdGarnishmentState_chkIndependentOrderStatus_1"
                    type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl03$chkIndependentOrderStatus" /></span>
        </td>
        <td>
            <span class="standardOrder">
                <input id="detailContentPlaceholder_grdGarnishmentState_chkStandardOrderStatus_1"
                    type="checkbox" name="ctl00$detailContentPlaceholder$grdGarnishmentState$ctl03$chkStandardOrderStatus"
                    checked="checked" /></span>
        </td>
    </tr>
</tbody>
</table>
</html>
4

3 に答える 3

3

誰もが jQuery 1.4.1 の使用を無視しているため、動作する例を次に示します。

http://jsfiddle.net/applehat/F63Aj/1/

 $("input:checkbox").click(function ()
 {
     if($(this).is(':checked'))
     {
         $(this).parents("tr:first").data('prevColor', $(this).parents("tr:first").css('background-color'));
         $(this).parents("tr:first").css('background-color', 'yellow');
     }
     else
     {
         $(this).parents("tr:first").css('background-color', $(this).parents("tr:first").data('prevColor'));
     }
 });

JSFiddle リンクが jQuery 1.3 を除外していることに気付くでしょう。したがって、1.3 で動作する場合は、1.4.1 でも簡単に動作するはずです。

于 2012-05-17T13:11:26.970 に答える
2

これを試して ：

http://jsbin.com/ozarov/3/edit

これにより、行の背景色も交互のスタイルで保存されます...

     $("table").on("click", ":checkbox", function ()
 {
     if($(this).is(':checked'))
     {
         $(this).parents("tr:first").data('prevColor', $(this).parents("tr:first").css('background-color'));
         $(this).parents("tr:first").css('background-color', 'yellow')
     }
     else
     {
         $(this).parents("tr:first").css('background-color', $(this).parents("tr:first").data('prevColor'))
     }
 });

ps 2つのチェックボックスに基づいて私のサンプルを詳しく説明できます...

于 2012-05-17T12:30:36.147 に答える
1

あなたのメモなどに基づく仮定: チェックボックスが変更されると、行が黄色で強調表示されます。

$("table").on("change", ":checkbox", function() {
    $(this).parents("tr:first").css('background-color','yellow');
});

効果: 行のチェックボックスが変更されると、強調表示されます。注: 黄色で強調表示されると、強調表示されないように変更されることはありません。

編集: CSS のハイライト クラスを使用できます.highlight{background-color:yellow;}が、2 行目では、より「具体的」であり、追加されたクラスを常にオーバーライドするため、そこに埋め込まれた背景色スタイルを削除する必要があります。.addClass('highlight');

以前のバージョンの変更イベント ハンドラの構文:

$("table").find(':checkbox').change( function() {
    $(this).parents("tr:first").css('background-color','yellow');
});

動的要素追加の遅い .live ハンドラー:

$("table").find(':checkbox').live('change', function() {
    $(this).parents("tr:first").css('background-color','yellow');
});

EDIT2: 1.4.1 から 1.4.4 への多くのイベント管理の変更がありました。

1.4.1 の変更イベントが正しく発生していないようです - 2 回目の変更でのみ発生します。SO、代わりにクリックイベントを使用してください：

jQuery('input').click(function() {
    jQuery(this).parents("tr:first").css('background-color', 'yellow');
});

ここでの実例: http://jsfiddle.net/vW9vQ/1/

BROKEN .change テストはこちら: http://jsfiddle.net/vW9vQ/

この点については、jQuery の現在のリリースに更新することを強くお勧めします。

于 2012-05-17T12:52:26.090 に答える