Question

Here's an example of my problem on jsFiddle.

我有一个在CSS中使用tr:nth-child(odd)强加条带行的表，就像在table-striped类的Twitter Bootstrap中所做的那样。我想突出显示该表的最近点击的行。我使用以下Javascript执行此操作：

$('#mytable tbody tr').live('click', function(event) {
    $clicked_tr = $(this);
    $clicked_tr.parent().children().each(function() {
        $(this).removeClass('highlight')
    });
    $clicked_tr.addClass('highlight');
});

该代码在没有条带行的表中正常工作。但是对于条带行，highlight类的背景颜色不会覆盖table-striped类的背景颜色。这是为什么？我怎样才能让它发挥作用？

Answer 1

http://jsfiddle.net/iambriansreed/xu2AH/9/

.table-striped class

.table-striped tbody tr.highlight td { background-color: red; }

...和更清洁的jQuery：

~~$('#mytable tbody tr').live('click', function(event) { $(this).addClass('highlight').siblings().removeClass('highlight'); });~~

更新： .live()已被弃用。使用.on()。

$('#mytable').on('click', 'tbody tr', function(event) {
    $(this).addClass('highlight').siblings().removeClass('highlight');
});

已修复： http://jsfiddle.net/iambriansreed/xu2AH/127/

Answer 2

.highlight

的

Increase the specificity

通过阅读this article并查看this answer

中的演示，了解更多“CSS特异性”

//your normal green has "023"
//.table-striped  010
//tbody           001
//tr              001
//:nth-child(odd) 010 
//td              001 = 023
.table-striped tbody tr:nth-child(odd) td {
    background-color: green;
}

// your highlight only has "010"
//thus it can't take precedence over the applied style
.highlight{
    background-color: red
}

//a more specific highlight =  "033" will take precedence now
//.table-striped  010
//tbody           001       
//tr              001       everything is about the same except
//.highlight      010   <-- an added class can boost specificity
//:nth-child(odd) 010 
//td              001 = 033
.table-striped tbody tr.highlight:nth-child(odd) td {
    background-color: red;
}

Answer 3

它更容易，只需使用de Bootstrap css类（如.info .warning .error或.success）在所选行之间切换而不是选中。他们拥有该行的所有状态。

我使用了这个，基于@iambriansreed的回答：

$('#mytable tbody tr').live('click', function(event) {
    $(this).addClass('info').siblings().removeClass('info');
}

Answer 4

只需将Bootstrap .table-striped CSS类编辑为：

.table-striped tbody tr:nth-child(odd),
.table-striped tbody tr:nth-child(odd) th {
    background-color: #f9f9f9;
}

.table-striped tbody tr:nth-child(even){
    background-color: yellow;
}

删除您不想要的所有td样式。然后就行了。

当您单击该行时，也应该应用此样式：

.selected { background-color:#2f96b4 !important; }

如果没有!important，它将无效。

Answer 5

据我所知：

$('#mytable tbody tr').live('click', function(event) {
    $clicked_tr = $(this);
    $('#mytable tbody tr').removeClass("highlight");
    $clicked_tr.addClass('highlight');
});

突出显示条带化HTML表格的单击行

5 个答案: