Nêu bật những hàng nhấp của một bảng sọc HTML

Question

Here's an example of my problem on jsFiddle.

Tôi có một bảng với hàng sọc áp đặt bằng cách sử dụng tr:nth-child(odd) trong CSS, như được thực hiện trong Twitter Bootstrap cho lớp table-striped. Tôi muốn làm nổi bật hàng được nhấp gần đây nhất của bảng đó. Tôi làm điều đó với Javascript sau:

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

Mã đó hoạt động tốt trong bảng không có hàng sọc. Nhưng với các hàng sọc, màu nền của lớp highlight sẽ không ghi đè màu nền của lớp table-striped. Tại sao vậy? Và làm thế nào tôi có thể làm cho nó hoạt động?

Answer 1

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

.table sọc lớp

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

... và sạch jQuery:

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

Cập nhật:.live() từ đó đã được phản đối. Sử dụng .on().

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

Cố định:http://jsfiddle.net/iambriansreed/xu2AH/127/

Answer 2

Increase the specificity của .highlight

Tìm hiểu thêm "CSS đặc hiệu" bằng cách đọc this article và kiểm tra các bản demo trong this answer

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

Theo như tôi hiểu:

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

Answer 4

Nó là dễ dàng hơn nhiều, chỉ cần sử dụng lớp css de Bootstrap (như .info .warning .error hay. thành công) để chuyển đổi giữa hàng đã chọn và không được chọn. Họ có tất cả các trạng thái cho hàng.

tôi đã sử dụng này, dựa trên câu trả lời @iambriansreed:

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

Answer 5

Chỉ cần sửa lại lớp CSS Bootstrap .table-striped này:

.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; 
} 

Hủy bỏ tất cả các phong cách td bạn không muốn. Sau đó, nó hoạt động.

Khi bạn click chuột vào dòng phong cách này cũng nên được áp dụng:

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

Nó sẽ không làm việc nếu không có sự !important.