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

这是我在jsFiddle问题的一个例子。

我有一个在CSS中使用tr:nth-child(odd)强加条形行的表,就像在Twitter Bootstrap中对table-striped类所做的那样。 我想突出显示该表格的最新点击行。 我用下面的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类的背景颜色。 这是为什么? 我怎样才能使它工作?

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

.table-striped类

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

增加 .highlight

通过阅读这篇文章并查看这个答案中的演示,了解更多“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; } 

这很容易,只需使用de Bootstrap css类(如.info .warning .error或.success)在所选行之间切换,而不是选中。 他们有行的所有州。

我用这个,基于@iambriansreed的答案:

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

只需编辑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它不会工作。

据我所理解:

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