Desafio: enfocar una fila que ha cambiado de una tabla html
Publicado por Miguel.C (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"]))
{
?>
Dibujo la tabla en pantalla
// utilizo esta funcion para recargar los datos sin recargar la página
// aquí el div "resultado" que se recarga luego que se ejecuta la función onclick.
//primera fila estática de la tabla
//filas siguientes que la consulta encuentra en la tabla dentro de la base en mysql
// con la siguiente consulta busco los registros de la tabla y los represento con un while hasta el final
//asigno los valores recopílados a cada variable antes de dibujar la tabla.
// dibujo las filas encontradas
// en los siguientes 2 columnas, al clickear envio al $query1 por GET el id de la fila y el estado: "P" o "A"
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'];
$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);
}$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>
<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>
<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))
{
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>';
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>
echo '<td><a href="estecodigo.php?id='.$id.'&&asis=A" onclick="javascript:recargar();"></a></td>';
echo '</tr>';
}
?>
</table>
</div>
</body>
</html>
Valora esta pregunta
0
