MARCAR FILAS AL PASAR POR UN ÍCONO O SOBRE LA FILA
El script está explicado en el código. la idea es no equivocarse al clicar el ícono (ver azul, modificar
gris y borrar rojo por ejemplo), ni efectuar una operación sobre la fila equivocada.
Por otro lado en el segundo ejemplo solo se desea estar seguro en que fila estoy.
TIPS:
Para un ejemplo completo marcando fila al clicar ícono Clic aquí.
Por otro lado en el segundo ejemplo solo se desea estar seguro en que fila estoy.
TIPS:
- Cada ícono tiene una clase separada para identificarlo luego .parents('tr') busca el primer <tr> a la izquierda y le aplica el css.
- En la segunda tabla cada <tr> tiene la misma clase así no tenemos problemas con la primera tabla. Si solo hay una directamente podemos usar 'tbody tr' (no tr solo si no también el título cambiaría)
Para un ejemplo completo marcando fila al clicar ícono Clic aquí.
<head>
<LINK href="../css/estilos.css" type=text/css rel=StyleSheet>
<link href="../css/font-awesome.min.css" rel="StyleSheet">
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function(){
//************************MARCAR LAS FILAS AL PASAR SOBRE ÍCONO*************************************
$('body').on('mouseover','.ficha', function(e){ // 1-si estoy sobre ficha
$(this).parents('tr').css('background-color','#a4cce9'); // 2- color de fondo del ícono a toda la fila (tr)
$(this).parents('tr').css('color','black'); // 3- letras negras
}); // fin mouseover
$('body').on('mouseover','.edicion', function(e){ // idem
$(this).parents('tr').css('background-color','#bbbbbb');
$(this).parents('tr').css('color','black');
}); // fin mouseover
$('body').on('mouseover','.borrar', function(e){ // idem
$(this).parents('tr').css('background-color','#ee939c');
$(this).parents('tr').css('color','black');
}); // fin mouseover
$('body').on('mouseout','.ficha,.edicion,.borrar', function(e){ // 4- al salir de cualquiera de los tres
$(this).parents('tr').css('background-color','white'); // 5-repongo fondo
$(this).parents('tr').css('color','#555555'); // 6-repongo color de letras
}); // fin mouseout
//************************MARCAR LAS FILAS AL PASAR SOBRE LA FILA*************************************
$('body').on('mouseover','.pasar', function(e){ // 7-al entrar en una tr .pasar
$(this).css('background-color','#cccccc'); // 8- color de fondo a toda la fila (tr)
$(this).css('color','black'); // 9- letras negras
$(this).css('font-weight','bold'); // 10- negritas
}); // fin mouseover
$('body').on('mouseout','.pasar', function(e){ // 11- al salir de cualquier fila
$(this).css('background-color','white'); // 12-repongo fondo
$(this).css('color','#555555'); // 13-repongo color de letras
$(this).css('font-weight','normal'); // 14- quito negritas
}); // fin mouseout
});
</script>
//************************ESTILOS NECESARIOS*************************************
<style>
.titulo{
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
color: #000;
text-align: left;
padding-left: 20px;
}
.contenido{
padding-left: 20px;
padding-right: 20px;
}
table{
border-collapse:collapse;
margin-top: 50px;
color:#555555;
font-size: .8rem;
}
td{
border: #000 solid 1px;
margin: 0px;
padding: 5px;
padding-bottom:3px;
padding-top:3px;
}
.segunda th{
border: #000 solid 1px;
margin: 0px;
padding: 5px;
padding-bottom:3px;
padding-top:3px;
}
.ficha{
cursor:pointer;
}
.edicion{
cursor:pointer;
}
.borrar{
cursor:pointer;
}
</style>
</head>
//************************HTML DE LAS DOS TABLAS*************************************
<body>
<div class="contenido">
<table>
<thead>
<tr>
<th style="width: 100px;">ORDEN</th>
<th style="width: 100px;">FECHA</th>
<th style="width: 100px;">OBSERVACIÓN</th>
<th style="width: 15px;"></th>
<th style="width: 15px;"></th>
<th style="width: 15px;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>24/05/2007</td>
<td>Josefina</td>
<td class='ficha' ><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></td>
<td class='edicion' ><i class='fa fa-pencil' aria-hidden='true'></i></a></td>
<td class='borrar' ><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></td>
</tr>
<tr>
<td>2</td>
<td>15/03/2007</td>
<td>Pedro</td>
<td class='ficha' ><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></td>
<td class='edicion' ><i class='fa fa-pencil' aria-hidden='true'></i></a></td>
<td class='borrar' ><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></td>
</tr>
<tr>
<td>3</td>
<td>5/08/1997</td>
<td>Alicia</td>
<td class='ficha' ><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></td>
<td class='edicion' ><i class='fa fa-pencil' aria-hidden='true'></i></a></td>
<td class='borrar' ><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></td>
</tr>
<tr>
<td>4</td>
<td>5/08/08</td>
<td>Zulma</td>
<td class='ficha' ><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></td>
<td class='edicion' ><i class='fa fa-pencil' aria-hidden='true'></i></a></td>
<td class='borrar' ><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></td>
</tr>
<tr>
<td>5</td>
<td>7/12/23</td>
<td>Alcira</td>
<td class='ficha' ><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></td>
<td class='edicion' ><i class='fa fa-pencil' aria-hidden='true'></i></a></td>
<td class='borrar' ><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></td>
</tr>
</tbody>
</table>
<div class="titulo" style="margin-top: 50px;">
MARCAR FILAS AL PASAR SOBRE ELLAS
</div>
<div style="margin-top: 50px; margin-bottom: 100px;">
<table class="segunda">
<thead>
<tr>
<th style="width: 100px;">ORDEN</th>
<th style="width: 100px;">FECHA</th>
<th style="width: 100px;">OBSERVACIÓN</th>
<th style="width: 15px;"></th>
<th style="width: 15px;"></th>
<th style="width: 15px;"></th>
</tr>
</thead>
<tbody>
<tr class="pasar">
<td>1</td>
<td>24/05/2007</td>
<td>Josefina</td>
<td class='ficha' ><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></td>
<td class='edicion' ><i class='fa fa-pencil' aria-hidden='true'></i></a></td>
<td class='borrar' ><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></td>
</tr>
<tr class="pasar">
<td>2</td>
<td>15/03/2007</td>
<td>Pedro</td>
<td class='ficha' ><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></td>
<td class='edicion' ><i class='fa fa-pencil' aria-hidden='true'></i></a></td>
<td class='borrar' ><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></td>
</tr>
<tr class="pasar">
<td>3</td>
<td>5/08/1997</td>
<td>Alicia</td>
<td class='ficha' ><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></td>
<td class='edicion' ><i class='fa fa-pencil' aria-hidden='true'></i></a></td>
<td class='borrar' ><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></td>
</tr>
<tr class="pasar">
<td>4</td>
<td>5/08/08</td>
<td>Zulma</td>
<td class='ficha' ><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></td>
<td class='edicion' ><i class='fa fa-pencil' aria-hidden='true'></i></a></td>
<td class='borrar' ><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></td>
</tr>
<tr class="pasar">
<td>5</td>
<td>7/12/23</td>
<td>Alcira</td>
<td class='ficha' ><i class='fa fa-eye' aria-hidden='true' style='color:darkcyan;'></i></td>
<td class='edicion' ><i class='fa fa-pencil' aria-hidden='true'></i></a></td>
<td class='borrar' ><i class='fa fa-minus-circle fa-lg' aria-hidden='true' style='color:red;'></i></td>
</tr>
</tbody>
</table>
</div>
</body>