JavaScript - Desafio: enfocar una fila que ha cambiado de una tabla html

   
Vista:
Imágen de perfil de Miguel.C

Desafio: enfocar una fila que ha cambiado de una tabla html

Publicado por Miguel.C macsistemasar@yahoo.com.ar (2 intervenciones) el 23/07/2016 09:42:50
Hola a todos, estoy diseñando una aplicación en php para cargar las asistencias de los alumnos de un curso.
Al actualizar el estado de la asistencia, ya sea presente (P) o ausente (A), la tabla se actualiza y me recarga la página perfectamente.

EL DESAFIO QUE TENGO ES:
Como la lista de alumnos es larga y supera el alto de la pantalla, cuando clickeo en un registro de los ultimos de la tabla, luego de recargar la página me posiciona en el principio de la tabla.
Esto provoca que deba hacer scroll hasta abajo en busca del siguiente alumno, y ES TOTALMENTE INCOMODO.
Necesito que la funcion recargar() tenga tambien un focus() a partir del Id que estoy actualizando.
Es decir, como el id pasa por GET, la funcion recargar() lea este ID y luego haga un focus sobre la fila que contenga este ID, para no tener que estar haciendo scroll hacia abajo cada vez que actualize un registro que esta fuera de pantalla.


Limpiado el código es mas o menos asi:

<?php

if(isset($_GET["id"]))
{
// recibo las variables por GET
$id=$_GET['id']; $asis=$_GET['asis'];

// actualizo la tabla con los valores recibidos del GET
$query = mysql_query("UPDATE curso1 SET `asis`='".$asis."' WHERE id='".$id."'");
mysql_free_result($query);
}
?>

Dibujo la tabla en pantalla
<html lang="es">
<head>
<meta charset="utf-8">
<script language="javascript" src="jquery-3.1.0.js"></script>
</head>

<body>

// utilizo esta funcion para recargar los datos sin recargar la página
<script language="javascript">
function recargar() { $("#resultado").html(data); };
</script>


// aquí el div "resultado" que se recarga luego que se ejecuta la función onclick.
<div id="resultado">
<table>

//primera fila estática de la tabla
<tr><td>ALUMNO</td><td>ASISTENCIA</td></tr>

//filas siguientes que la consulta encuentra en la tabla dentro de la base en mysql
<?php

// con la siguiente consulta busco los registros de la tabla y los represento con un while hasta el final
$query2 = mysql_query("SELECT * FROM curso1 ORDER BY alumno");
while ($result = mysql_fetch_array($query2))
{

//asigno los valores recopílados a cada variable antes de dibujar la tabla.
$id = $result [id]; $alumno = $result [alumno]; $asis = $result [asis];

// dibujo las filas encontradas
echo '<tr>';
echo '<td>'.$alumno.'</td>';

// en los siguientes 2 columnas, al clickear envio al $query1 por GET el id de la fila y el estado: "P" o "A"
echo '<td><a href="estecodigo.php?id='.$id.'&&asis=P" onclick="javascript:recargar();"></a></td>';
echo '<td><a href="estecodigo.php?id='.$id.'&&asis=A" onclick="javascript:recargar();"></a></td>';
echo '</tr>';
}
?>
</table>
</div>
</body>
</html>
Captura
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Desafio: enfocar una fila que ha cambiado de una tabla html

Publicado por DAVID (36 intervenciones) el 24/07/2016 11:30:51
Hola,
Usa para mostrar los datos de la tabla el componente JQuery datatables. No tendras ese problema.
https://datatables.net/

Un saludo
David
diseño web madrid
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Miguel

Desafio: enfocar una fila que ha cambiado de una tabla html

Publicado por Miguel macsistemasar@yahoo.com.ar (2 intervenciones) el 28/07/2016 19:18:33
David, estuve leyendo sobre las datatables, y lo que pude ver que el módulo EDITOR es pago, algo asi como u$s119, que pasado a pesos argentinos son mas o menos $1900, demasiado costoso para nosotros, es casi el 10% de mi salario.
Existe alguna otra alternativa gratis?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas

Desafio: enfocar una fila que ha cambiado de una tabla html

Publicado por Vainas (239 intervenciones) el 24/07/2016 20:26:34
Buenas:

Esta muy mal planteado el codigo desde mi punto de vista. Tendrias que pensar en traer los datos por xml, html o json y hacer un solo refresco cada x tiempo por ejemplo o al pulsar un boton y eso aqui no se ve....

Para salir del paso y que funcione lo que se me ocurre es que uses un anchor... que es una etiqueda "a" de la siguiente forma:

1
echo '<td><a href="estecodigo.php?id='.$id.'&&asis=P#idX" id="idX"></a></td>';

Creo que seria algo asi.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar