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>

我在鼠标悬停事件中切换行的颜色。

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

问题在于这两者相互作用。如果选中某行，我想保持突出显示，从而覆盖mouseenter / 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');
    });
});

尽量避免使用内联样式。在样式表中处理所有样式而不是在几个地方处理它会容易得多。

除非单击复选框，否则使用jQuery更改行颜色

1 个答案: