Destacar fila de una tabla
Problema:
Como destacar una fila determinada de una tabla con un click sobre ella
Las tablas en HTML son el método para presetnar datos relacioandos en una página web: listas de precios, catálagos, servicios...
Se puede formatear para que sea fácil de leer aún cuando tenga muchos datos.
¿Pero como destavcar una fila concreta con el ratón?
Solución
Se usa el evento click o mousedown sobre el elemento table
Al pulsar en la tabla se dispara un evento click (o mousedown) y mediante el obejto event podemos determinar exactamente en que fila se ha pulsado.
Una vez conocemos la fila podemos cambiar su estilo para que destaque sobre el resto de la tabla. Cada fila deberá tener un id propio
La clave está en usar la propiedad event.target para saber el objeto sobre el que se ha pulsado.
Ejemplo
Para mostrar el efecto usamos un tabla simple con precios:
<style>
.activa{background: gray; color:white}
.normal{background: white}
</style>
</head>
<body>
<table id="precios">
<tr id="1" class="normal"><td>Manzanas</td><td>3€</td></tr>
<tr id="2" class="normal"><td>Naranjas</td><td>6€</td></tr>
<tr id="3" class="normal"><td>Plátanos</td><td>5€</td></tr>
</table>
<script>
var tabla = document.getElementById('precios');
tabla.addEventListener('click', destacar);
function destacar()
{
event.target.parentElement.classList.replace('normal', 'activa')
if(window.activa !== undefined){
window.activa.classList.replace('activa', 'normal');
}
window.activa = event.target.parentElement;
}
</script>
Así de fácil, hay dos clases (activa, normal). Al pulsar con el ratón se dispara el evento de la tabla, pero quien primero lo recibe es una celda (td), así que actuamos sobre la fila que contiene a esa celda.
La final activa se guarda como propiedad de windows, para no tener que buscarla en cada interacción (mejora el comportamiento del script, sobre todo en páginas muy grandes).