Iluminar y marcar celda al pasar con el raton en una tabla.

satjaen · #1 (**permalink**) 23/11/2012, 12:14

Hola, tengo una tabla en la cúal listo resultados de la base de datos y quisiera saber si se puede hacer que al pasar el raton por la celda se ilumine y se seleccione al pulsarle ya que que tiene un input tipo radio.

Código PHP:

 
<table width="100%"  border="1" class="table-dg-grid" >

<tr>

<tr bgcolor=#9CF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>

                    <th><span title="selecc">Selecc.</span></th>

                    <th><span title="num_aparato">NºAparato</span></th>

                    <th><span title="aparato">Aparato</span></th>

                    <th><span title="marca">Marca</span></th>

                    <th><span title="modelo">Modelo</span></th> 

                    <th><span title="num_serie">NºSerie</span></th>

                    <th><span title="num_producto">Cod/12nc</span></th> 

</tr>

 
<?php do { ?>

<tr class="tbSubHeader1">    

<th><input name="s" type="radio" value="<?=$row_ap_usuarios['NUM_APARATO'];?>"/></th>    

<th><?php echo $row_ap_usuarios['NUM_APARATO']; ?></th>    

<th><?php echo $row_ap_usuarios['APARATO']; ?></th>    

<th><?php echo $row_ap_usuarios['MARCA']; ?></th>    

<th><?php echo $row_ap_usuarios['MODELO']; ?></th>

<th><?php echo $row_ap_usuarios['NUM_SERIE']; ?></th>

<th><?php echo $row_ap_usuarios['NUM_PRODUCTO']; ?></th>        

</tr>

<?php } while ($row_ap_usuarios = mysql_fetch_assoc($ap_usuarios)); ?>

<caption class="tb1CaptionBottom"></caption>

</table>

Gracias y un saludo

gebremswar · #2 (**permalink**) 23/11/2012, 16:43

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.

satjaen · #3 (**permalink**) 23/11/2012, 17:01

Muchas gracias por tu tiempo, pruebo y comento.
Un saludo

satjaen · #4 (**permalink**) 23/11/2012, 19:08

@gebremswar, no me sale. He puesto esto y no se si puede ser por el contenido dinámico:

Código Javascript:

Ver original<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>
th, td {cursor:default}
.row {
    color: #000;
    font-size: 10px;
}
.row.over {background-color:#E7E7E7}
.row.selected {background-color:#0072C6;color:white}
</style>

Código Javascript:

Ver original<table width="100%" id="list"  border="1" class="table-dg-grid" >
<thead>
<tr bgcolor=#9CF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
<th><span title="selecc">Selecc.</span></th>
<th><span title="num_aparato">NºAparato</span></th>
<th><span title="aparato">Aparato</span></th>
<th><span title="marca">Marca</span></th>
<th><span title="modelo">Modelo</span></th> 
<th><span title="num_serie">NºSerie</span></th>
<th><span title="num_producto">Cod/12nc</span></th> 
</tr>
 </thead>
<?php do { ?>
<tr class="row">    
<th><input name="s" type="checkbox" class="check" value="<?=$row_ap_usuarios['NUM_APARATO'];?>"/></th>  
<th><?php echo $row_ap_usuarios['NUM_APARATO']; ?></th> 
<th><?php echo $row_ap_usuarios['APARATO']; ?></th> 
<th><?php echo $row_ap_usuarios['MARCA']; ?></th>   
<th><?php echo $row_ap_usuarios['MODELO']; ?></th>
<th><?php echo $row_ap_usuarios['NUM_SERIE']; ?></th>
<th><?php echo $row_ap_usuarios['NUM_PRODUCTO']; ?></th>        
</tr>
<?php } while ($row_ap_usuarios = mysql_fetch_assoc($ap_usuarios)); ?>
<caption class="tb1CaptionBottom"></caption>
</table>

Gracias

gebremswar · #5 (**permalink**) 24/11/2012, 08:04

Hola nuevamente satjaen.

Cita:

Iniciado por satjaen

@gebremswar, no me sale ....

En realidad ya lo sabía

. Si probaste el ejemplo de mi mensaje anterior con contenido estático podrás darte cuenta que funciona perfectamente, pero el detalle está en ..........

Cita:

Iniciado por satjaen

(...) no se si puede ser por el contenido dinámico:

Así es, lo ocasiona el contenido dinámico. Y esto es porque los elementos con clase ".row" aun no están presentes cuando el "ready" de jquery se ejecutó y comprobó que el DOM ha sido cargado y puede ser manipulado.

Es entonces que debemos definir selectores a partir de los presentes en el contenido estático. Por ejemplo podemos hacer referencia al body ya que sabes que esta presente en el contenido estático y partir de allí definir los descendientes que dispararán el evento.

Pero para este ejemplo que compartiré, no hace falta ir tan "arriba" en busca del padre que estará presente como es el caso de <body>. Ya que podemos definir un id en la tabla y a partir de el crearemos nuestro selector.

Código Javascript:

Ver original<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>@GBreagan</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(document).on('ready', function(){
    $('#list').on('click', '.row', 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')
        }
    });
    $('#list').on('click', '.row .check', function(event){
        event.stopPropagation();
        $(this).parents('.row').toggleClass('selected');
    });
    //Esto solo es de ejemplo para agregar contenido dinámico
    $('#add').on('click', function(){
        $('#list tbody').append('<tr class="row"><td><input type="checkbox" class="check"></td><td>fdw</td></tr>');
    });
});
</script>
<style>
table {border-collapse:collapse;border-spacing:0}
th, td {border:1px solid black;cursor:default}
.row:hover {background-color:#E7E7E7}
.row.selected {background-color:#0072C6;color:white}
</style>
</head>
<body>
<input type="button" value="add row" id="add">
<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>

Como puedes observar el cambio es mínimo (bueno, eliminé también los eventos mouseenter y mouseleave por lo que te comenté en el mensaje anterior).

En el ejemplo se puede apreciar como se asocia el selector dentro del propio cuerpo de la función para especificar el desentiende que disparará el evento. Para nuestro caso la clase .row a partir de su padre #list. Y para el checkbox ".row .check".


Casi lo olvido. Es posible que en otros lugares (foros o blog's) encuentres solución al pequeño inconveniente descrito en este mensaje, referente al contenido dinámico, tratado con el método .live() de JQuery. Y es por eso que te dejo un articulo el cual recomienda no utilizarlo: Porqué no debemos usar nunca jQuery Live


Cita:

Iniciado por satjaen

Gracias

De nada

satjaen · #6 (**permalink**) 24/11/2012, 13:54

Otra vez gracias, pocos en este foro y en otros se toman tanto tiempo en explicar cosas que para los que se dedican íntegramente a la programación son sencillas pero para los que empezamos son tan difíciles. Es de agradecer, repito.

Pruebo y comento.
Un saludo

satjaen · #7 (**permalink**) 25/11/2012, 14:02

@gebremswar, he estado probando tú código que funciona my bien pero es para agregar contenido dinámico y no me sirve para lo que intento hacer.
Un saludo.

gebremswar · #8 (**permalink**) 26/11/2012, 01:52

Cita:

Iniciado por satjaen

@gebremswar, he estado probando tú código que funciona my bien pero es para agregar contenido dinámico y no me sirve para lo que intento hacer.
Un saludo.

En realidad si te sirve, ya que sirve tanto con contenido dinámico como estático. Pero más claro creo que no te puedo explicar.

Quizá puedas ser más específico y explicarnos porque no te sirve, en que falla al agregarloa tu aplicación (errores de javascript) estas usando firebug para revisar los posibles errores, etc.

Puse un boton add row que permite "agregar contenido dinámico" haciendo de ejemplo a lo que podría ser un php que trae contenido traído por ajax asíncronamente. Es un ejemplo simple pero que basta para explicar lo que necesitas básicamente.

Vuelvo a repetir, estoy especificando mi id #list que esta presente en el html estático y partir de ahi a los descendientes dinámicos y (...)

ya no continúo porque repetiría mi mensaje anterior

Por favor lee atentamente el mensaje anterior, solo necesitas entender lo que expliqué ahí y podrás aplicar lo aprendido a lo que deseas realizar.


Otro dato adicional, el método .on() de JQuery esta disponible a partir de la version 1.7.


satjaen · #9 (**permalink**) 26/11/2012, 09:41

Ok, lo intentaré pero no tengo muchos conocimientos de php, javascript, etc...
Gracias de nuevo.

satjaen · #10 (**permalink**) 27/11/2012, 10:01

Bueno, ya he podido ponerme y lo he sacado. Ahora quiero que debajo de la tabla:

Código Javascript:

Ver original<table width="100%"  id="list" border="1" class="aparatos4"  >
<thead>
<tr bgcolor=#9CF id=t70 ondblclick='coloreaf(70,1)' onMouseOver='coloreamosin(70,1)' onMouseOut='coloreamosout(70,1)'>
<th><span title="selecc">Selecc.</span></th>
<th><span title="num_aparato">NºAparato</span></th>
<th><span title="aparato">Aparato</span></th>
<th><span title="marca">Marca</span></th>
<th><span title="modelo">Modelo</span></th> 
<th><span title="num_serie">NºSerie</span></th>
<th><span title="num_producto">Cod/12nc</span></th> 
</tr>
 </thead>
<?php do { ?>
<tr class="row" >   
<th><input name="s" type="checkbox" class="check" value="<?=$row_ap_usuarios['NUM_APARATO'];?>"/></th>  
<th><?php echo $row_ap_usuarios['NUM_APARATO']; ?></th> 
<th><?php echo $row_ap_usuarios['APARATO']; ?></th> 
<th><?php echo $row_ap_usuarios['MARCA']; ?></th>   
<th><?php echo $row_ap_usuarios['MODELO']; ?></th>
<th><?php echo $row_ap_usuarios['NUM_SERIE']; ?></th>
<th><?php echo $row_ap_usuarios['NUM_PRODUCTO']; ?></th>        
</tr>
<?php } while ($row_ap_usuarios = mysql_fetch_assoc($ap_usuarios)); ?>
<caption class="tb1CaptionBottom"></caption>
</table>

Al hacer click en el checkbox se me rellenen las cajas de texto de la fila seleccionada:

Código Javascript:

Ver original<table width="100%">
  <tr>
    <td>Aparato</td>
    <td><input name="aparato" type="text" /></td>
    <td>Modelo</td>
    <td><input name="modelo" type="text" /></td>
    <td>NºSerie</td>
    <td><input name="modelo" type="text" /></td>
  </tr>
  <tr>
    <td>Marca</td>
    <td><input name="marca" type="text" /></td>
    <td>Cod/12Nc</td>
    <td><input name="NUM_PRODUCTO" type="text" /></td>
    <td>Revisión</td>
    <td><input name="revision" type="text" /></td>
  </tr>
</table>

Gracias por vuestro tiempo.

satjaen · #11 (**permalink**) 27/11/2012, 12:05

@gebremswar, quería preguntarte como podría hacer una vez que he añadido contenido dinámico a una fila insertarlo en la base de datos. Es decir, relleno los campos :

Código Javascript:

Ver original$('#add').on('click', function(){
$('#list tbody').append('<tr class="row"><td><input type="checkbox" class="check"></td><td><input type="hidden" name="num_aparato"></td><td><input type="text" name="aparato"></td><td><input type="text" name="marca"></td><td><input type="text" name="modelo"><td><input type="text" name="NUM_SERIE"></td><td><input type="text" name="NUM_PRODUCTO"></td></tr>');
 });

Y como los envio a la base de datos?
Un saludo.