突出显示条带化HTML表格的已点击行 [英] Highlighting the clicked row of a striped HTML table

问题描述

以下是我在jsFiddle上遇到的问题的示例。

我有一个带有条纹行的表，在CSS中使用 tr：nth-​​child（odd），就像在Twitter Bootstrap中为 -striped 类。我要突出显示该表的最近一次点击的行。我用下面的Javascript：

I have a table with striped rows imposed by using tr:nth-child(odd) in the CSS, as is done in Twitter Bootstrap for the table-striped class. I want to highlight the most recent clicked row of that table. I do that with the following Javascript:

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

该代码在没有条纹行的表中正常工作。但是对于条纹行，高亮类的背景颜色不会覆盖 table-striped 类。这是为什么？

That code works fine in a table without striped rows. But with striped rows, the background color of the highlight class won't override the background color of the table-striped class. Why is that? And how can I make it work?

推荐答案

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

.table条纹类

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

... and cleaner jQuery：

... and cleaner jQuery:

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

/ s>

更新： .live（）使用 .on（） 。

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

$ b b

修正： http://jsfiddle.net/iambriansreed/xu2AH/127/

这篇关于突出显示条带化HTML表格的已点击行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！