Question

I have some table rows with checkboxes.

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

I’m toggling the color of the rows on mouseover events.

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

I also want to highlight rows that are checked:

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

The problem is when these two interact. I want to maintain the highlighting if a row is checked, thus overriding the mouseenter/mouseleave.

I tried this, but it seems to operate across all rows/checkboxes instead of the specific row with the checked checkbox.

$(".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'});
    }
});

How do I keep the css from changing if a row’s checkbox is clicked?

Answer 1

Use CSS classes and the not selector. Also note that I replace parent with closest('tr').

Not changing checked rows:

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

Setting the checked class instead:

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

Try to avoid using inline styling as much as you can. It’s a lot easier to handle all styling in the stylesheet instead of in several places.