突出显示条形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'); });
