jquery 突出显示和取消突出显示表行

Question

我有一个包含多行的表格，我为每个奇数行设置了一个等级阴影，甚至设置了一个稍微不同的阴影，这样每一行都更容易阅读。

在单击事件时，我会用不同的颜色突出显示该行，以便您知道选择了哪条记录，但是当单击不同的行时，我不确定如何删除/将颜色恢复为原始颜色。

相反，我要做的是作弊？!并将所有行设置回备用灰色，然后将新突出显示的颜色应用于所选行。

我想知道是否有更好的方法来做到这一点。

$(document).on("click","#div2 tr#abc", function(event) {

    barcode = $(this).data('barcode');

    $('tr:odd[id="abc"]').css('backgroundColor', '#FAFAFA');
    $('tr:even[id="abc"]').css('backgroundColor', '#F2F2F2');

    $(this).css('backgroundColor','#FFD6F5');

});

Answer 1

我建议您使用 css 类而不是使用 css() 函数:

CSS

.highlight { background-color:yellow }

jQuery

单击行时，从所有行中删除 highlight 类，然后将此类添加到单击的行:

$('#yourTable tr').on('click', function() {
   $('#yourTable tr').removeClass('highlight');
   $(this).addClass('highlight');
});