Hola
satjaen, que tal.
Cita:
Iniciado por satjaen 
(...) quisiera saber si se puede (...)
Si se puede!
Cita:
Iniciado por satjaen que al pasar el raton por la celda se ilumine
Ese "se ilumine"
, podemos traducirlo como: que cambie de color a uno más bonito con la pseudo-clase
:hover.
Ejemplo CSS:
Código CSS:
Ver originaltable tr:hover {background-color:greenyellow} /*para la fila*/
/*... o si solo se desea ...*/
table tr td:hover {background-color:greenyellow} /*para la celda*/
Cita:
Iniciado por satjaen y se seleccione al pulsarle ya que que tiene un input tipo radio.
Ese "se seleccione"
, podemos traducirlo como: que al hacerle click obtenga un nuevo color (distinto al usado en :hover) que represente su estado de seleccionado como también el
input[type="checkbox"] presente.
Ahi ya estamos en el territorio de Javascript y como estamos el el foro 127 usaremos JQuery.
Código Javascript
:
Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).on('ready', function(){
$('#list .row').on({
click: function(){
var $checkbox = $(this).find('.check');
if ($checkbox.prop('checked')) {
$checkbox.prop('checked', false);
$(this).removeClass('selected')
} else {
$checkbox.prop('checked', true);
$(this).addClass('selected')
}
},
mouseenter: function(){$(this).addClass('over')},
mouseleave: function(){$(this).removeClass('over')}
});
$('#list .row .check').on('click', function(event){
event.stopPropagation();
$(this).parents('.row').toggleClass('selected');
});
});
</script>
<style>
table {border-collapse:collapse;border-spacing:0}
th, td {border:1px solid black;cursor:default}
.row.over {background-color:#E7E7E7}
.row.selected {background-color:#0072C6;color:white}
</style>
</head>
<body>
<table id="list">
<thead>
<tr>
<th>*</td>
<th>Name</td>
</tr>
</thead>
<tbody>
<tr class="row">
<td><input type="checkbox" class="check"></td>
<td>gebremswar</td>
</tr>
<tr class="row">
<td><input type="checkbox" class="check"></td>
<td>satjaen</td>
</tr>
</tbody>
</table>
</body>
</html>
Quizá quede algunas cosas por ajustar debido al contenido dinámico. Pero básicamente es lo que deseas realizar.
Así mismo, podrías obviar las lineas 20 y 21 del código que he compartido y utilizar en su lugar las reglas CSS que puse de ejemplo en la segunda respuesta que escribí lineas más arriba con el fin de no ocupar JQuery en algo tan simple que se puede manejar con CSS.
Cita:
Iniciado por satjaen Gracias y un saludo
Saludos igualmente y coméntanos cualquier duda.
