Tabla editable

robandrox · #1 (**permalink**) 17/04/2006, 13:25

Me gustaria saber si puedo hacer una tabla editable con JavaScript.Me explico:cuando hago una consulta a una DB muestro el resultado por pantalla en una tabla y mi idea es que mediante un botón de "editar"(tal y como se hace en este foro)me aparezcan los datos para poder ser modificados y sin tener que cambiar de página.

Salu2

hYuNkEl · #2 (**permalink**) 17/04/2006, 15:19

Seria con AJAX

uamistad · #3 (**permalink**) 17/04/2006, 23:16

No creo que sea necesario usar ajax para lo que necesita robandrox.

Bien puedes poner tu botón 'editar' y editar los datos. La recarga de la página sí la harías al final (como si estuvieras enviando un formulario) pero al menos el efecto de no tener que cargar una nueva página para editar, es bueno y cuando te metas en ajax, pues ya sería una cosita de nada lo que le cambiarías para que trabajara justo como estos foros.

Ejemplo pulse Aquí

(código fuente del ejemplo)

Código PHP:

  <html><head><title>Simulando VBulletin</title></head>
<body>




<!-- //////////////////// PONGÁMOSLE UN POQUITO DE ESTILO /////////////////// -->
<style type="text/css">
    table{
         font:0.85em Arial,Helvetica,Sans-Serif;
         width:500px;
         margin-left:50px;
        }
    .autor{ background-color:#CCC;}
    .texto{ background-color:#EFFEFF; }
    textarea {
         width: 450px;
         height: 120px;
         font:0.85em Arial,Helvetica,Sans-Serif;
        }
</style>





<!-- //////////////////// CON JAVASCRIPT, LA VIDA ES MÁS SABROSA /////////////////// -->
<script type="text/javascript">
    //el comentario editable lo metes en Js como variable global
    last_comment =  "No creo que sea necesario usar ajax para lo que necesita robandrox. Bien puedes poner tu botón 'editar' y editar los datos. La recarga de la página sí la harías al final (como si estuvieras enviando un formulario) pero al menos el efecto de no tener que cargar una nueva página para editar, es bueno y cuando te metas en ajax, pues ya sería una cosita de nada lo que le cambiarías para que trabajara justo como estos foros.";

    function editarUltimo(){
         alertaboton = "No tiene función este botón, pero cuando usas AJAX su función es enviarle los datos al server usando el objeto AJAX.\n\nSuena más complicado de lo que es, en realidad es bastante sencillo y te lleva pocas líneas.";
         edicion  = '<textarea id="edicion">'+last_comment+"</textarea>\n";
         edicion += '<input type="button" value="Actualizar" onClick="alert(alertaboton)">';
         document.getElementById('last_comment').innerHTML = edicion;
        }
</script>






<!-- //////////////////// HTML, LO VEMOS HASTA EN LA SOPA /////////////////// -->

<table>
    <tr><td class="autor">Robandrox</td></tr>
    <tr><td class="texto">Me gustaria saber si puedo hacer una tabla editable con JavaScript.Me explico:cuando hago una consulta a una DB muestro el resultado por pantalla en una tabla y mi idea es que mediante un botón de "editar"(tal y como se hace en este foro)me aparezcan los datos para poder ser modificados y sin tener que cambiar de página. Salu2</td></tr>
    <tr><td class="autor">hYuNkEl</td></tr>
    <tr><td class="texto">Seria con AJAX</td></tr>
    <tr><td class="autor">Uamistad</td></tr>
    <tr><td class="texto" id="last_comment"><script type="text/javascript">document.write(last_comment+"<br/>"+'<input type="button" value="Editar" onClick="editarUltimo()">');</script></td></tr>
</table>
</body>
</html>

robandrox · #4 (**permalink**) 18/04/2006, 04:09

Muchas gracias uamistad.En el ejemplo que pones mas o menos lo entiendo,pero ya cuando tengo que editar varios campos me lío un poco,ya que de Js se lo justo porque vengo de php.Aedmás,el número de campos a editar es variable,según los campos que elija un usuario en un formulario.Si quieres pongo el código que tengo aunque es un poco lioso

Saludos

uamistad · #5 (**permalink**) 18/04/2006, 04:35

Hola man. Bueno, es la idea nada más. Lo del último campo se puede hacer con todos, haciéndolo con uno (que edite y que guarde) se puede generalizar. Desde PHP puedes imprimir todo ese código desde el server y darle un ID único a cada campo. Ese id lo identificará a la hora salvar las ediciones sobre el campo nuevamente a la base de datos.

Por ejemplo que en lugar de usar editarUltimo() uses una llamada editar() y le pases como parámetro el campo de texto que se editará.

Es lo de menos y el efecto queda bastante bien (bueno, usando algo de estilos y teniendo buen gusto, queda bien).

Lo de buen gusto lo digo porque pienso que soy malo con los colores y ese mundo.

robandrox · #6 (**permalink**) 18/04/2006, 04:46

Haber,resulta que yo tengo ésto:

Código PHP:

  $codigo=$_POST['codigo'];

         $campos=array();

        $i=0;

       //Recibo los campos desde un form de la DB que se quieren ver y los guardo en el array $campos

          foreach($_POST as $nombre_campo=>$valor)

         {

               $asignacion="\$".$nombre_campo."='".$valor."';";

            eval($asignacion);

            if($valor==on)

            {

                $campos[$i]=$nombre_campo;

                $i++;

            }

         }

        $sent="SELECT ";

        

        //Veo qué campos recibo porque no todos son de la misma tabla y necesito saberlo para hacer el SELECT correctamente

        foreach($campos as $valor)

        {

            //Comparamos el valor que obtenemos con los posibles valores

            if(strcasecmp($valor,"apellidos")==0 || strcasecmp($valor,"nombre")==0

             || strcasecmp($valor,"dni")==0 || strcasecmp($valor,"tfno1")==0 ||

              strcasecmp($valor,"tfno2")==0 || strcasecmp($valor,"direccion")==0

               || strcasecmp($valor,"municipio")==0 || strcasecmp($valor,"provincia")==0

                || strcasecmp($valor,"cp")==0 || strcasecmp($valor,"email")==0){

 
               $sent=$sent."datosalumnos2.".$valor.",";

            }

            else if(strcasecmp($valor,"nota")==0){

 
               $sent=$sent."notas.".$valor.",";

            }

            else if(strcasecmp($valor,"intentos_examen")==0){

 
                $sent=$sent."matriculas.".$valor.",";

            }

        } //Cerramos el foreach

 
        $sent=rtrim($sent,",");//Eliminamos la última coma de la cadena $sent

        $sent=$sent." FROM datosalumnos2,matriculas,notas WHERE

        matriculas.curso='$codigo' AND notas.dni=datosalumnos2.dni AND matriculas.dni=datosalumnos2.dni";

        $result=baseDatos("base",$sent);

        

        //Finalmente construimos una tabla con todos los datos

        echo "<table align='center'>";

        echo "<tr class=fondoscuro>";

 
        foreach($campos as $valor)

        {

            echo "<td align='center'><b>$valor</b></td>";

        }

        echo "</tr>";

 
        //Creamos e inicializamos la variable para contar el número de filas

        $num_filas=0;

 
        while($row=mysql_fetch_assoc($result))

         {

            echo "<tr";

            if($num_filas%2==0)

            {

                echo " class=fondoclaro>";

                      foreach($row as  $valor_campo) {

                             echo "<td align='center'>$valor_campo</td>";

                    }

                echo "</tr>";

                $num_filas++;

            }else if($num_filas%2!=0){

                echo " class=fondoclaro2>";

                       foreach($row as  $valor_campo) {

                             echo "<td align='center'>$valor_campo</td>";

                    }

                echo "</tr>";

                $num_filas++;

            }

 
        }

        echo "</table>";

        echo "<br><br>";

El problema es que como es tan "variable" no se muy bien cómo hacerlo.Si me pudieras echar una mano te lo agradecería

uamistad · #7 (**permalink**) 18/04/2006, 05:42

Mira, así como yo lo puse escribí los campos como variables de Js en lugar de hacerlo directamente en el documento. Se imprimió con write()

Esto fue para poder editarlo, pues necesitaba recuperar la información nuevamente al momento de 'dibujar' el textarea y lo obtuve llamando nuevamente a dicha variable.

Este método no te lo aconsejo si te interesa que Google te indexe, porque Google no lee Javascript y tu documento no tendrá ningún sentido para un robot que sólo encuentra <td's> y write()'s.

Pero si esto no es problema, viene el otro sobre:

//Veo qué campos recibo porque no todos son de la misma tabla y necesito saberlo para hacer el SELECT correctamente

Ahora veo a lo que te refieres, necesitarías hacer un buen de pruebas, p' que saliera todo bien, 'ta muy loco tu código =) y meterte un poquito en Js porque si vas a usar Ajax, de poco lo explotarás sabiendo lo justo de js.

Pero como te digo, si no quieres meterte en ajax bastaría con que mostraras el contenido de tu registro en un textarea y luego des la posibilidad de un submit y vuelves a cargar la misma página en la que estabas.

robandrox · #8 (**permalink**) 18/04/2006, 05:47

Lo haré pues haciendo que se vaya a otra página y con HTML puro y duro.

Gracias