Como hago para que al pinchar en una linea de una tabla cambie de registro

corretodo · #1 (**permalink**) 16/03/2010, 02:57

Hola: estoy aprendiendo a trabajar con php y MySQL y he creado una plantilla en la que en la parte de arriba veo los campos de un registro de una tabla de MySQL mediante un formulario y en la parte de abajo mediante una tabla html veo todos los registros de dicha tabla de MySQL.
La base de datos se llama amistades y la tabla amigos
La consulta que hago es esta:

Código PHP:

   
$conexion = mysql_connect("localhost", "", ""); // conecta con el servidor 
mysql_select_db("amistades", $conexion); // conecta con la base de datos 
$instruccion = "SELECT id_amigo, nombre, direccion, ciudad, codigo, provincia, movil, FROM amigos ORDER BY NOMBRE ASC"; //ordena la tabla 
$consulta = mysql_query ($instruccion, $conexion) or die ("Fallo en la consulta");

Cuando hago esta consulta me aparece el la parte de arriba el ultimo registro con los correspondientes campos y el la parte de abajo me aparecen todos los registros que tengo introducidos en la tabla html ordenados segun tengo en la consulta.

Mi pregunta es si se puede hacer que no se como hacerlo.

Que pinchando con el raton en la tabla html que tengo debajo en uno de los registros que aparecen horizontalmente se cambien los datos de los campos de la parte de arriba.

Esto lo veo muy dificl para mi y no se si lo puedo hacer, por eso recurro a ustedes a ver si lo puedo hacer y como debo hacerlo.

Muchas gracias

abimaelrc · #2 (**permalink**) 16/03/2010, 03:45

Ese problema ya no es con PHP sino con javascript, espera que un moderador te mueva al foro correspondiente para que te puedan ayudar.

corretodo · #3 (**permalink**) 16/03/2010, 06:16

Gracias abimaelrc.
A ver si por favor un moderador me cambia el hilo a javascript como me ha recomendado abimaelrc.
Muchas gracias

GatorV · #4 (**permalink**) 16/03/2010, 08:18

Tema movido desde PHP a Javascript

dannytm · #5 (**permalink**) 16/03/2010, 10:52

Juega con los Ids en las filas y despues crea una funcion.

Código html:

Ver original<script>
function cambio(id){
       var contenido = document.getElementById('fila_seleccionada'+id).innerHTML;
       document.getElement.ById('fila_de_arriba').innerHTML = contenido;
}
</script>
<table>
     <tr>
          <td id="fila_de_arriba"></td>
     </tr>
     <tr>
          <td id="fila_seleccionada1" onclick="cambio('1')">Contenido</td>
     </tr>
     <tr>
          <td id="fila_seleccionada2" onclick="cambio('2')">Contenido</td>
     </tr>
</table>

Supongo que estás buscando esto más o menos, si me pasas el código completo de tu aplicación te puedo hacer el código Javascript exacto, saludos!!

corretodo · #6 (**permalink**) 16/03/2010, 13:34

muchas gracias con tu codigo.
probare primero con lo que me has puesto y si tengo alguna duda te lo comento.
Muy agradecido por tu ayuda.

corretodo · #7 (**permalink**) 17/03/2010, 02:56

Hola dannytm, mis conocimientos no son como yo pensaba, estoy muy atascado.
No se de javascript y no se como enlazar una variable de javascript a php, con la funcion que me has creado.
Te puedo pasar el codigo de php, para ver si me puedes asignar el ejemplo que me has puesto, dentro del php.
Lo que pasa que no vas a poder ejecutarlo visualmente porque va enlazado a una base de datos de MySQL.
Aunque en tu hilo me dices que te pase el codigo, confirmamelo y te lo paso.
Veras que el codigo no esta muy depurado pues estoy aprendiendo y a lo mejor repito consultas.

dannytm · #8 (**permalink**) 17/03/2010, 06:56

sí, pon el código para que pueda asignarle ids y que lo veas mas claro, saludos.

corretodo · #9 (**permalink**) 17/03/2010, 09:30

Este es el codigo:

Código PHP:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Amigos</title> 
<meta http-equiv="content-type" content="text/html; charset=UTF8"> 
<script> 
function cambio(id) 
{        
var contenido = document.getElementById('fila_seleccionada'+id).innerHTML;        
document.getElement.ById('fila_de_arriba').innerHTML = contenido; 
} 
</script> 
</head> 
<!-- --> 
<body> 
<div id="contenido"> 
 
<div id="text1" style="position:absolute; overflow:hidden; left:358px; top:6px; width:256px; height:34px"> 
<div><font size="5" color="#0000FF" face="Comic Sans MS"><B>AMISTADES</B></font></div> 
</div> 
<div id="hr1"></div> 
 
<?php 
 
//---------------------Titulos de la tabla--- 
print ("<div class='scrolled'>\n"); 
print ("<table wjth=100%>\n"); 
print ("<tr>\n");  
print ("<th scope='col'>NOMBRE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>\n"); 
print ("<th scope='col'>DIRECCION&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>\n"); 
print ("<th scope='col'>CIUDAD&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>\n"); 
print ("<th scope='col'>C.P.</th>\n"); 
print ("<th scope='col'>PROVINCIA&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>\n"); 
print ("<th scope='col'>T-MOVIL</th>\n");    
print ("</tr>\n"); 
//---------------------- 
$tabla=0; 
$conexion = mysql_connect("localhost", "root", ""); // conecta con el servidor 
mysql_select_db("amistades", $conexion) or  die ("No se puede seleccionar la base de daros"); // conecta con la base de datos 
$instruccion = "SELECT * FROM amigos ORDER BY NOMBRE ASC"; //ordena la tabla 
$consulta = mysql_query ($instruccion, $conexion) or die ("Fallo en la consulta1");  
while ($row = mysql_fetch_array($consulta)) 
{ 
$registro = $row['id_amigo']; 
If ($tabla==0) 
{ 
//-------------------------Fila de un color------------------------- 
print ("<tr width=100%>\n"); 
print ("<th scope='row' class='spec'>" . "</th>\n"); 
print  ("<td>" . $row['nombre'] . "</td>\n"); 
print  ("<td>" . $row['direccion'] . "</td>\n"); 
print  ("<td>" . $row['ciudad'] . "</td>\n"); 
print  ("<td>" . $row['codigo'] . "</td>\n"); 
print  ("<td>" . $row['provincia'] . "</td>\n"); 
print  ("<td>" . $row['movil'] . "</td>\n"); 
print ("</tr>\n"); 
$tabla = 1; 
} 
else 
{ 
//-----------------------------Fila de otro color------------------- 
print ("<tr width=100%>\n"); 
print ("<th scope='row' class='specalt'>" . "</th>\n"); 
print  ("<td>" . $row['nombre'] . "</td>\n"); 
print  ("<td>" . $row['direccion'] . "</td>\n"); 
print  ("<td>" . $row['ciudad'] . "</td>\n"); 
print  ("<td'>" . $row['codigo'] . "</td>\n"); 
print  ("<td>" . $row['provincia'] . "</td>\n"); 
print  ("<td>" . $row['movil'] . "</td>\n"); 
print ("</tr>\n"); 
print ("</table>\n"); 
print ("</div>\n"); 
$tabla=0;  
} 
} 
//--------------------------Vuelvo a hacer la consulta para el formulario---------------- 
// ----- la variable $registro es la que controlo para que al pinchar con el raton en  
//------ una fila me presente los campos de ese registro en el formulario  
//--------------------------------------------------------------------------------------------------- 
$orden = "SELECT * FROM amigos WHERE id_amigo = '$registro'"; 
$consulta = mysql_query ($orden, $conexion) or die ("Fallo en la consulta02"); 
$resultado = mysql_fetch_array($consulta); 
$_POST['nombre'] = $resultado['nombre']; 
$_POST['direccion'] = $resultado['direccion']; 
$_POST['ciudad'] = $resultado['ciudad']; 
$_POST['codigo'] = $resultado['codigo']; 
$_POST['provincia'] = $resultado['provincia']; 
$_POST['movil'] = $resultado['movil']; 
//-------------------------------------------------- 
mysql_free_result($consulta); 
mysql_close($conexion); // cierra la conexion con la base de datos 
?> 
<!-- asigno las variables a mi formulario--> 
<div id="formulario"> 
<form action="" method="post"> 
<form name="amigos" style="margin:0px"> 
<div id="etiqueta"><B>NOMBRE:</B></div> 
<input name="nombre" type="text" value="<?php echo $_POST['nombre'];?>"> 
<div id="etiqueta"><B>DIRECCIÓN:</B></div> 
<input name="direccion" type="text" value="<?php echo $_POST['direccion'];?>"> 
<div id="etiqueta"><B>CIUDAD:</B></div> 
<input name="ciudad" type="text" value="<?php echo $_POST['ciudad'];?>"> 
<div id="etiqueta"><B>CÓDIGO:</B></div> 
<input name="codigo" type="text" value="<?php echo $_POST['codigo'];?>"> 
<div id="etiqueta"><B>PROVINCIA:</B></div> 
<input name="provincia" type="text" value="<?php echo $_POST['provincia'];?>"> 
<div id="etiqueta"><B>T-MOVIL:</B></div> 
<input name="moil" type="text" value="<?php echo $_POST['movil'];?>"> 
</form> 
</div> 
<!-- --> 
</div> 
</body> 
</html>

Veras que hay dos td distintos con la variable $tabla=0, o tabla= 1 es porque cada linea de la tabla pinta una si y otra no con color distinto.

dannytm · #10 (**permalink**) 17/03/2010, 14:48

Una pregunta, porque no entiendo demasiado bien, que es lo que quieres hacer?

Cuando pulsas sobre una fila en la tabla declarada, cambiar los registros del formulario de abajo?

corretodo · #11 (**permalink**) 17/03/2010, 15:31

Si efectivamente
En la tabla me aparecen todos los registros, cada uno en una fila.
Por defecto me aparece el ultimo en el formulario.
Y lo que quiero es que pinchando con el raton en una fila cualquiera me cambien los datos en el formulario de abajo, correspondiente a la fila de la tabla que he seleccionado clicando con el raton.

corretodo · #12 (**permalink**) 20/03/2010, 01:41

No se si me he explicado bien, pero es eso lo que quiero.
Que al pinchar con el mouse en una linea de la tabla, me presente en el formulario los datos correspondientes al registro que he pinchado con el mouse en la linea de la tabla.

Muchas gracias

Adler · #13 (**permalink**) 20/03/2010, 06:38

Hola

Para colorear cada tabla de un color no es necesario imprimir cada tabla con un class distinto

Prueba esto

Código PHP:

Ver originalwhile ($row = mysql_fetch_array($consulta))
{
$registro = $row['id_amigo']; 
$resto = ($tabla &#37; 2);
switch ($resto) { // Coloreamos cada tabla
        case 0: $estilo = "spec"; break;
        case 1: $estilo = "specalt"; break;
}
//-------------------------Fila de un color-------------------------
print ("<tr width=100% id="$tabla" onclick="volcar_valores($tabla)>\n");
print ("<th scope='row' class='$estilo'>" . "</th>\n");
print  ("<td>" . $row['nombre'] . "</td>\n");
print  ("<td>" . $row['direccion'] . "</td>\n");
print  ("<td>" . $row['ciudad'] . "</td>\n");
print  ("<td>" . $row['codigo'] . "</td>\n");
print  ("<td>" . $row['provincia'] . "</td>\n");
print  ("<td>" . $row['movil'] . "</td>\n");
print ("</tr>\n");
$tabla += 1; 
}

La función js para insertar los valores en los campos del form. No está probada

Código Javascript:

Ver originalfunction volcar_valores(tabla) {
tr = document.getElementById(tabla);
td = tr.getElementsByTagName("td");
idDiv = document.getElementById("formulario");
inputDiv = idDiv.getElementsByTagName("input");
for (i = 0; i < td.length; i++) {
inputDiv[i].value = td[i].value;
}
}

Suerte

corretodo · #14 (**permalink**) 20/03/2010, 08:38

Muchas gracias por tu atencion.
Yo como veras estoy aprendiendo y no controlo lo que yo desearia.
he incluido tu codigo y me da un error.
Parse error: syntax error, unexpected T_SWITCH
Si no te importa podrias inluir el codigo que me has puesto dentro del codigo que yo he puesto en mi hilo, porque seguro que lo he hecho mal y por eso me da ese error.
La ventana de abajo la he incluido el el head dentro de las etiquetas <script>
Y el codigo de la parte de atriba lo he sustituido a partid del while inclusive.
Asi es como lo he hecho:

Código PHP:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
<head>  
<title>Amigos</title>  
<meta http-equiv="content-type" content="text/html; charset=UTF8">  
<script type="text/javascript"> 
function volcar_valores(tabla)  
{ 
tr = document.getElementById(tabla); 
td = tr.getElementsByTagName('td'); 
idDiv = document.getElementById('formulario'); 
inputDiv = idDiv.getElementsByTagName('input'); 
for (i = 0; i < td.length; i++)  
{ 
inputDiv[i].value = td[i].value; 
} 
} 
</script> 
</head>  
<!-- -->  
<body>  
<div id="contenido">  
 
<div id="text1" style="position:absolute; overflow:hidden; left:358px; top:6px; width:256px; height:34px">  
<div><font size="5" color="#0000FF" face="Comic Sans MS"><B>AMISTADES</B></font></div>  
</div>  
<div id="hr1"></div>  
 
<?php  
 
//---------------------Titulos de la tabla---  
print ("<div class='scrolled'>\n");  
print ("<table wjth=100%>\n");  
print ("<tr>\n");   
print ("<th scope='col'>NOMBRE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>\n");  
print ("<th scope='col'>DIRECCION&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>\n");  
print ("<th scope='col'>CIUDAD&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>\n");  
print ("<th scope='col'>C.P.</th>\n");  
print ("<th scope='col'>PROVINCIA&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>\n");  
print ("<th scope='col'>T-MOVIL</th>\n");     
print ("</tr>\n");  
//----------------------  
$tabla=0;  
$conexion = mysql_connect("localhost", "root", ""); // conecta con el servidor  
mysql_select_db("amistades", $conexion) or  die ("No se puede seleccionar la base de daros"); // conecta con la base de datos  
$instruccion = "SELECT * FROM amigos ORDER BY NOMBRE ASC"; //ordena la tabla  
$consulta = mysql_query ($instruccion, $conexion) or die ("Fallo en la consulta1");   
while ($row = mysql_fetch_array($consulta)) 
{ 
$registro = $row['id_amigo'];  
$resto = ($tabla % 2); 
switch ($resto)  
{ // Coloreamos cada tabla         
case 0: $estilo = "spec";  
break;         
case 1: $estilo = "specalt";  
break; 
}//-------------------------Fila de un color------------------------- 
print ("<tr width=100% id='$tabla' onclick='volcar_valores($tabla)'>\n"); 
print ("<th scope='row' class='$estilo'>" . "</th>\n"); 
print ("<td>" . $row['nombre'] . "</td>\n"); 
print ("<td>" . $row['direccion'] . "</td>\n"); 
print ("<td>" . $row['ciudad'] . "</td>\n"); 
print ("<td>" . $row['codigo'] . "</td>\n"); 
print ("<td>" . $row['provincia'] . "</td>\n"); 
print ("<td>" . $row['movil'] . "</td>\n"); 
print ("</tr>\n"); 
$tabla += 1; 
} // aqui lo cierro 
//------------------------------------------------------ 
print ("</table>\n");  
print ("</div>\n");  
//--------------------------Vuelvo a hacer la consulta para el formulario----------------  
// ----- la variable $registro es la que controlo para que al pinchar con el raton en   
//------ una fila me presente los campos de ese registro en el formulario   
//---------------------------------------------------------------------------------------------------  
$orden = "SELECT * FROM amigos WHERE id_amigo = '$registro'";  
$consulta = mysql_query ($orden, $conexion) or die ("Fallo en la consulta02");  
$resultado = mysql_fetch_array($consulta);  
$_POST['nombre'] = $resultado['nombre'];  
$_POST['direccion'] = $resultado['direccion'];  
$_POST['ciudad'] = $resultado['ciudad'];  
$_POST['codigo'] = $resultado['codigo'];  
$_POST['provincia'] = $resultado['provincia'];  
$_POST['movil'] = $resultado['movil'];  
//--------------------------------------------------  
mysql_free_result($consulta);  
mysql_close($conexion); // cierra la conexion con la base de datos  
?>  
<!-- asigno las variables a mi formulario-->  
<div id="formulario">  
<form action="" method="post">  
<form name="amigos" style="margin:0px">  
<div id="etiqueta"><B>NOMBRE:</B></div>  
<input name="nombre" type="text" value="<?php echo $_POST['nombre'];?>">  
<div id="etiqueta"><B>DIRECCIÓN:</B></div>  
<input name="direccion" type="text" value="<?php echo $_POST['direccion'];?>">  
<div id="etiqueta"><B>CIUDAD:</B></div>  
<input name="ciudad" type="text" value="<?php echo $_POST['ciudad'];?>">  
<div id="etiqueta"><B>CÓDIGO:</B></div>  
<input name="codigo" type="text" value="<?php echo $_POST['codigo'];?>">  
<div id="etiqueta"><B>PROVINCIA:</B></div>  
<input name="provincia" type="text" value="<?php echo $_POST['provincia'];?>">  
<div id="etiqueta"><B>T-MOVIL:</B></div>  
<input name="moil" type="text" value="<?php echo $_POST['movil'];?>">  
</form>  
</div>  
<!-- -->  
</div>  
</body>  
</html>

Adler · #15 (**permalink**) 20/03/2010, 09:01

Hola

Has de cerrar el while

Suerte

corretodo · #16 (**permalink**) 20/03/2010, 09:58

Perdona creo que esta cerrado mila el codigo que he puesto
$tabla += 1;
} Aqui lo cierro
Gracias

Adler · #17 (**permalink**) 20/03/2010, 14:36

Hola

Ahora revisando la función js cambia

Cita:

inputDiv[i].value = td[i].value;

por

Cita:

inputDiv[i].value = td[i].innerHTML;

Suerte

corretodo · #18 (**permalink**) 20/03/2010, 14:47

Pues no hay suerte me da este error
Parse error: syntax error, unexpected T_SWITCH in C:\InetPub\www\amigos.php on line 53
La linea 53 es la del switch(resto)
$resto = ($tabla % 2);
switch ($resto)

Adler · #19 (**permalink**) 20/03/2010, 15:08

Hola

No logro ver donde puede estar el error. Te he montado esto que a efectos prácticos es lo mismo que te ocupa

Código PHP:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title></title> 
<meta http-equiv="content-type" content="text/html; charset=UTF8"> 
<style type="text/css">
.color0 {background: orange;}
.color1 {background: yellow;}
</style>
<script type="text/javascript">
function volcar_valores(tabla) {
tr = document.getElementById(tabla);
td = tr.getElementsByTagName('td');
idDiv = document.getElementById('formulario');
inputDiv = idDiv.getElementsByTagName('input');
    for (i = 0; i < td.length; i++) {
        inputDiv[i].value = td[i].innerHTML;        
    }
}
</script>
</head> 
<!-- --> 
<body> 
<table width="100%" border="1px">
<tr>
<th>NOMBRE</th>
<th>DIRECCI&Oacute;N</th>
<th>CIUDAD</th>
<th>C.P.</th>
<th>PROVINCIA</th>
<th>T-MOVIL</th> 
</tr>
 
<?php 
$tabla = 0;
//---------------------- 
while ($tabla < 4) {
    
        $resto = ($tabla % 2);
            switch ($resto) { // Coloreamos cada tabla        
                case 0: $estilo = "color0"; break;        
                case 1: $estilo = "color1"; break;
            }
 
//-------------------------Fila de un color-------------------------
print ("<tr width='100%' id='$tabla' onclick='volcar_valores($tabla);'>\n");
print ("<td class=".$estilo.">nombre_" .$tabla. "</td>\n");
print ("<td class=".$estilo.">direccion_" .$tabla. "</td>\n");
print ("<td class=".$estilo.">ciudad_" .$tabla. "</td>\n");
print ("<td class=".$estilo.">codigo_" .$tabla. "</td>\n");
print ("<td class=".$estilo.">provincia_" .$tabla. "</td>\n");
print ("<td class=".$estilo.">movil_" .$tabla. "</td>\n");
print ("</tr>\n");
$tabla += 1;
 
}
//------------------------------------------------------
?> 
</table>
 
<!-- Asigno las variables a mi formulario--> 
<div id="formulario">
<form action="" method="post"> 
<div><B>NOMBRE:</B></div> 
<input name="nombre" type="text" value=""> 
<div><B>DIRECCI&Oacute;N:</B></div> 
<input name="direccion" type="text" value=""> 
<div><B>CIUDAD:</B></div> 
<input name="ciudad" type="text" value=""> 
<div><B>C.P:</B></div> 
<input name="codigo" type="text" value=""> 
<div><B>PROVINCIA:</B></div> 
<input name="provincia" type="text" value=""> 
<div><B>T-MOVIL:</B></div> 
<input name="moil" type="text" value=""> 
</form> 
</div>
</body> 
</html>

Suerte

corretodo · #20 (**permalink**) 20/03/2010, 15:43

El error estava en la linea 4 de tu primer ejemplo
En el segundo ejemplo que me has hecho me lo has puesto asi $resto = ($tabla % 2);
y de esta forma si funciona.
Muchisimas gracias es perfecto este ejemplo me ha encantado.
No creo que tenga ningun problema para aplcarlo a mi codigo.
La materia prima ya me la has dado con tu ejemplo.
De verdad muchas gracias Adler.
Esto era lo que efectivamente queria.