Destacando la fila pulsada de una tabla HTML rayas

Question

Here's an example of my problem on jsFiddle.

Tengo una tabla con filas de rayas impuestas mediante el uso de tr:nth-child(odd) en el CSS, como se hace en Twitter Bootstrap para la clase table-striped. Quiero resaltar la fila clicada más reciente de esa tabla. Lo hago con el siguiente código JavaScript:

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

Ese código funciona bien en una tabla sin filas de rayas. Pero con filas de rayas, el color de fondo de la clase highlight no anulará el color de fondo de la clase table-striped. ¿Porqué es eso? ¿Y cómo puedo hacer que funcione?

Answer 1

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

clase .table-rayas

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

... y más limpio jQuery:

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

Actualización:.live() ya está en desuso. Use .on().

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

fijo:http://jsfiddle.net/iambriansreed/xu2AH/127/

Answer 2

Increase the specificity del .highlight

Más información "especificidad CSS" mediante la lectura de this article y la salida a la demo en 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

Por lo que yo entiendo:

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

Answer 4

Es mucho más fácil, sólo tiene que utilizar clases CSS de rutina de carga (como .info .warning .Error o. éxito) para cambiar entre la fila seleccionada y no seleccionada. Tienen todos los estados para la fila.

He utilizado este, basado en la respuesta @iambriansreed:

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

Answer 5

apenas corrige la clase CSS Bootstrap .table-striped a esto:

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

eliminar todos los td peinado no desea. Entonces funciona

Al hacer clic en la fila este estilo también se debe aplicar:

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

No funcionará sin el !important.