Question

基本上我有一个包含很多行的表。表格使用一些css

在白色和灰色背景之间交替

.profile tr:nth-child(odd)    { background:#eee; }
.profile tr:nth-child(even)    { background:none; }

现在我希望用户能够选择一行并突出显示为黄色。完成一些简单的Jquery

    $(".Select").click(function() {
        //Deselect all other Rows
        $(".Select").show().prev().hide().parent().parent().css('background', 'none');



        //get Id
        var Row = $(this).parent().parent();
        var MatchId = Row.attr('id');
        $(this).hide().prev().show();
        Row.css('background', '#FFFFBA');
    });

问题在于我用$（“。select”）....... parent（）。parent（）。css（'background ....

抓取所有行

将其设置为“none”会使所有行变为白色并丢失替代着色是否有办法将background属性返回到其原始状态。

Answer 1

创建第三个类：

.profile tr.hover    { background:#FFFFBA; }

而不是

 Row.css('background', '#FFFFBA');

你做了

  Row.addClass("hover");

而不是

  $(".Select").s.//.parent().css('background', 'none');

你做了

  $(".Select").s.//.parent().removeClass("hover");

//只是为了缩短长线。

Answer 2

而不是那么麻烦，只需在.css样式表中使用TR选择器，然后使用:hover标记并让浏览器处理它。你可以卸载到底层浏览器的任何工作。

但是，我不完全确定你的代码是你想要做的。看起来您想要更改其他行的背景而不是您所在行的背景。如果是这种情况，那么您需要将一些.data()附加到目标对象并使用鼠标输出事件将其从您存储的任何内容中更改回来。

Answer 3

$(".Select").show().prev().hide().parent().parent().css('background', '');

Answer 4

卡斯帕在这里是正确的，原因如下：

您将演示文稿保留在CSS中
浏览器比在JavaScript中操作样式对象更快地应用CSS
如果您为突出显示的项目添加其他样式（例如边框，粗体文本等），则不会影响性能（请参阅原因2）。

话虽如此，如果你想保留你拥有的代码，只需使用$.not()选择器从jQuery选择器中删除奇数行：

$(".Select").show().prev().hide().parent().parent().not(':nth-child(odd)').css('background', 'none');

在jquery更改后将背景颜色设置回原始颜色

4 个答案: