チェックボックスがクリックされていない限り、jQueryを使用して行の色を変更します。

Question

テーブルの行にチェックボックスがあります。

<table cellpadding="0" class="action_table"> 
    <tbody class="action_table_body"> 
     <tr class="action_table_row"> 
      <td class="action_table_checkbox"><input type="checkbox" id="chkbx_1"></td> 
      <td class="action_table_checkbox"><input type="checkbox" id="chkbx_2"></td> 
     </tr> 
    </tbody> 
</table> 

mouseoverイベントで行の色を切り替えています。

$(".action_table_row").mouseenter(function() { 
    $(this).css({background:'#FCF6CF'}); 
}).mouseleave(function() { 
    $(this).css({background:'#F3F3F3'}); 
}); 

私もチェックされている行をハイライト表示したい：

$('input:checkbox').click(function() { 
    if ($(this).attr('checked')) { 
     $(this).parent().parent().css({background:'#ff0000'}); 
    } else { 
     $(this).parent().parent().css({background:'#F3F3F3'}); 
    }); 
}); 

問題はときに、これらの2つの相互作用です。私は行がチェックされている場合、マウスの/ mouseleaveをオーバーライドして強調表示を維持したい。

私はこれを試しましたが、チェックされたチェックボックスで特定の行の代わりにすべての行/チェックボックスを操作しているようです。

$(".action_table_row").mouseenter(function() { 
    if ($(this + ':checkbox').attr('checked') == false) { 
     $(this).css({background:'#FCF6CF'}); 
    } 
}).mouseleave(function() { 
    if ($(this + ':checkbox').attr('checked') == false) { 
     $(this).css({background:'#F3F3F3'}); 
    } 
}); 

行のチェックボックスをクリックすると、CSSが変更されないようにするにはどうすればよいですか？

Answer 1

CSSクラスとnotセレクタを使用します。また、parentをclosest('tr')に置き換えています。

をチェックした行を変更しない：

$(".action_table_row:not(.checked)").mouseenter(function() { 
    $(this).css({background:'#FCF6CF'}); 
}).mouseleave(function() { 
    $(this).css({background:'#F3F3F3'}); 
}); 

代わりcheckedクラスの設定：

$('input:checkbox').click(function() { 
    if ($(this).attr('checked')) { 
     $(this).closest('tr').addClass('checked'); 
    } else { 
     $(this).closest('tr').removeClass('checked'); 
    }); 
}); 

することができます限り、インラインスタイルを使用しないようにしてください。スタイルシートでは、複数の場所ではなく、すべてのスタイルを扱う方がはるかに簡単です。