Volver al Programación / Codificación foro

Javascript / php dinámica tabla para mysql

  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de Usuario
  • Registrado: Jul 18, 2008
  • Mensajes: 239
  • Loc: Western Australia
  • Status: Offline

Nota Julio 18th, 2008, 3:08 am

Im buscando para hacer una tabla Añadir / eliminar filas, haga clic en el botón (JavaScript) y luego presentar la entrada de datos en una base de datos MySQL (PHP).

La tabla hasta el momento

Código: [ Select ]
 
<html>
<head>
<title>Nomad JMDB - Create</title>
<script type="text/javascript">
 
function AddRow ()
{
 var o_txt0 = document.createTextNode (document.getElementById ("01Bno").value);
 var o_txt1 = document.createTextNode (document.getElementById ("01Type").value);
 var o_txt2 = document.createTextNode (document.getElementById ("01Class").value);
   
 var o_button = document.createElement ("input");
 o_button.type = "button";
 o_button.value = "Remove";
 o_button.onclick = RemoveRow;
 
 var o_td0 = document.createElement ("td");
 var o_td1 = document.createElement ("td");
 var o_td2 = document.createElement ("td");
 var o_td3 = document.createElement ("td");
 
 var o_tr = document.createElement ("tr");
 var o_body = document.getElementById ("dynamic_table_body");
 
 o_td0.appendChild (o_txt0);
 o_td1.appendChild (o_txt1);
 o_td2.appendChild (o_txt2);
 o_td3.appendChild (o_button);
 
 o_tr.appendChild (o_td0);
 o_tr.appendChild (o_td1);
 o_tr.appendChild (o_td2);
 o_tr.appendChild (o_td3);
 
// document.form1.01Bno.value = document.form1.01Bno.value + 1;
 
 o_body.appendChild (o_tr);
}
function RemoveRow ()
{
 var dinosaur = this.parentNode.parentNode;
 dinosaur.parentNode.removeChild (dinosaur);  // :-)
}
</script>
</head>
<body style="font-family: Arial">
<form id="form1" name="form1" method="post" action="create2.php">
  </p>
  <br>
  <table border="1" cellpadding="0" cellspacing="0">
    <tbody id="dynamic_table_body"><tr>
      <td width="92" height="102">Building #</td>
      <td width="63">Type</td>
      <td width="81">Class</td>
      <td width="221">
        <table width="200" cellpadding="0">
          <tr>
            <td>#: </td>
            <td><input name="01Bno" type="text" id="01Bno" value="001" size="10"></td>
          </tr>
          <tr>
            <td>Type: </td>
            <td><select name="01Type" id="01Type">
              <option value="Type 1" selected>Type 1</option>
              <option value="Type 2">Type 2</option>
                        </select></td>
          </tr>
          <tr>
            <td>Class:</td>
            <td><select name="01Class" id="01Class">
              <option value="1" selected>1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select></td>
          </tr>
          <tr>
            <td colspan="2"><button type="button" onClick="AddRow ();">Add Building</button></td>
            </tr>
        </table>
        </td>
    </tr>
   </tbody>
  </table>
  <p>
    <label>
    <input type="reset" name="clear" id="clear" value="Clear" />
    <input type="submit" name="create" id="create" value="Submit" />
    </label>
  </p>
</form>
</body>
</html>
 
  1.  
  2. <html>
  3. <head>
  4. <title>Nomad JMDB - Create</title>
  5. <script type="text/javascript">
  6.  
  7. function AddRow ()
  8. {
  9.  var o_txt0 = document.createTextNode (document.getElementById ("01Bno").value);
  10.  var o_txt1 = document.createTextNode (document.getElementById ("01Type").value);
  11.  var o_txt2 = document.createTextNode (document.getElementById ("01Class").value);
  12.    
  13.  var o_button = document.createElement ("input");
  14.  o_button.type = "button";
  15.  o_button.value = "Remove";
  16.  o_button.onclick = RemoveRow;
  17.  
  18.  var o_td0 = document.createElement ("td");
  19.  var o_td1 = document.createElement ("td");
  20.  var o_td2 = document.createElement ("td");
  21.  var o_td3 = document.createElement ("td");
  22.  
  23.  var o_tr = document.createElement ("tr");
  24.  var o_body = document.getElementById ("dynamic_table_body");
  25.  
  26.  o_td0.appendChild (o_txt0);
  27.  o_td1.appendChild (o_txt1);
  28.  o_td2.appendChild (o_txt2);
  29.  o_td3.appendChild (o_button);
  30.  
  31.  o_tr.appendChild (o_td0);
  32.  o_tr.appendChild (o_td1);
  33.  o_tr.appendChild (o_td2);
  34.  o_tr.appendChild (o_td3);
  35.  
  36. // document.form1.01Bno.value = document.form1.01Bno.value + 1;
  37.  
  38.  o_body.appendChild (o_tr);
  39. }
  40. function RemoveRow ()
  41. {
  42.  var dinosaur = this.parentNode.parentNode;
  43.  dinosaur.parentNode.removeChild (dinosaur);  // :-)
  44. }
  45. </script>
  46. </head>
  47. <body style="font-family: Arial">
  48. <form id="form1" name="form1" method="post" action="create2.php">
  49.   </p>
  50.   <br>
  51.   <table border="1" cellpadding="0" cellspacing="0">
  52.     <tbody id="dynamic_table_body"><tr>
  53.       <td width="92" height="102">Building #</td>
  54.       <td width="63">Type</td>
  55.       <td width="81">Class</td>
  56.       <td width="221">
  57.         <table width="200" cellpadding="0">
  58.           <tr>
  59.             <td>#: </td>
  60.             <td><input name="01Bno" type="text" id="01Bno" value="001" size="10"></td>
  61.           </tr>
  62.           <tr>
  63.             <td>Type: </td>
  64.             <td><select name="01Type" id="01Type">
  65.               <option value="Type 1" selected>Type 1</option>
  66.               <option value="Type 2">Type 2</option>
  67.                         </select></td>
  68.           </tr>
  69.           <tr>
  70.             <td>Class:</td>
  71.             <td><select name="01Class" id="01Class">
  72.               <option value="1" selected>1</option>
  73.               <option value="2">2</option>
  74.               <option value="3">3</option>
  75.               <option value="4">4</option>
  76.               <option value="5">5</option>
  77.               <option value="6">6</option>
  78.               <option value="7">7</option>
  79.               <option value="8">8</option>
  80.               <option value="9">9</option>
  81.               <option value="10">10</option>
  82.             </select></td>
  83.           </tr>
  84.           <tr>
  85.             <td colspan="2"><button type="button" onClick="AddRow ();">Add Building</button></td>
  86.             </tr>
  87.         </table>
  88.         </td>
  89.     </tr>
  90.    </tbody>
  91.   </table>
  92.   <p>
  93.     <label>
  94.     <input type="reset" name="clear" id="clear" value="Clear" />
  95.     <input type="submit" name="create" id="create" value="Submit" />
  96.     </label>
  97.   </p>
  98. </form>
  99. </body>
  100. </html>
  101.  


No sé cómo se utilizan los datos en la tabla al presentar el formulario. Yo preferiría una tabla dinámica, por lo tanto, no php creado (y no requiere actualización de la página). ¿Alguna idea?

Im también atrapado en incrementar el "01Bno" cuadro de texto en uno por cada nueva fila, (Si es posible, debe ser acolchado - por ejemplo, 001, 002,...)

Algo como lo siguiente?
Código: [ Select ]
document.form1.01Bno.value = document.form1.01Bno.value + 1;


Gracias de antemano por cualquier ayuda :)
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Julio 18th, 2008, 3:08 am

  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de Usuario
  • Registrado: Jul 18, 2008
  • Mensajes: 239
  • Loc: Western Australia
  • Status: Offline

Nota Julio 19th, 2008, 1:32 am

:( chichón!

Alguien tiene alguna idea? Me gustaría que agradecemos cualquier ayuda - Sé que es una gran cantidad de código para ver a través.

La tabla funciona bien, pero no sé cómo hacer referencia (o si se me permite) a los datos en su interior el momento de presentar el formulario.
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Registrado: Feb 10, 2004
  • Mensajes: 13455
  • Loc: Florida
  • Status: Offline

Nota Julio 19th, 2008, 1:54 am

Reemplace

Código: [ Select ]
var o_txt0 = document.createTextNode (document.getElementById ("01Bno").value);
var o_txt1 = document.createTextNode (document.getElementById ("01Type").value);
var o_txt2 = document.createTextNode (document.getElementById ("01Class").value);
  1. var o_txt0 = document.createTextNode (document.getElementById ("01Bno").value);
  2. var o_txt1 = document.createTextNode (document.getElementById ("01Type").value);
  3. var o_txt2 = document.createTextNode (document.getElementById ("01Class").value);


con

Código: [ Select ]
var o_txt0 = document.getElementById ("01Bno").cloneNode(true);
var o_txt1 = document.getElementById ("01Type").cloneNode(true);
var o_txt2 = document.getElementById ("01Class").cloneNode(true);
 
 o_txt0.name = 'o_text0[]';
 o_txt1.name = 'o_text1[]';
 o_txt2.name = 'o_text2[]';
  1. var o_txt0 = document.getElementById ("01Bno").cloneNode(true);
  2. var o_txt1 = document.getElementById ("01Type").cloneNode(true);
  3. var o_txt2 = document.getElementById ("01Class").cloneNode(true);
  4.  
  5.  o_txt0.name = 'o_text0[]';
  6.  o_txt1.name = 'o_text1[]';
  7.  o_txt2.name = 'o_text2[]';


Que pondrá a disposición de 3 matrices. "o_text0", "o_text1", y "o_text2" para el procesador de forma y mantener las filas editable para el usuario.
Strong with this one, the sudo is.
  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de Usuario
  • Registrado: Jul 18, 2008
  • Mensajes: 239
  • Loc: Western Australia
  • Status: Offline

Nota Julio 19th, 2008, 9:03 pm

Gracias por la respuesta.

He tenido una obra de teatro - funciona muy bien :)

¿Cómo puedo eliminar una entrada de la matriz - qué cambios serían necesarios para la función RemoveRow?

Por otra parte, ¿alguien sabe cómo automatizar la numeración en la primera fila de la tabla?
  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de Usuario
  • Registrado: Jul 18, 2008
  • Mensajes: 239
  • Loc: Western Australia
  • Status: Offline

Nota Julio 19th, 2008, 11:39 pm

Código: [ Select ]
function Increment() {
document.form1.bBno.value = document.form1.bBno.value + 1;
}
  1. function Increment() {
  2. document.form1.bBno.value = document.form1.bBno.value + 1;
  3. }


Las obras una vez y luego se detiene.

Ejemplo
  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de Usuario
  • Registrado: Jul 18, 2008
  • Mensajes: 239
  • Loc: Western Australia
  • Status: Offline

Nota Agosto 25th, 2008, 11:41 pm

/ bump

Im todavía buscando una manera de hacer la primera columna de la tabla automáticamente los números (pero aún en los cuadros de texto), puede ayudar a alguien?

Ver aquí para los actuales.
  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de Usuario
  • Registrado: Jul 18, 2008
  • Mensajes: 239
  • Loc: Western Australia
  • Status: Offline

Nota Julio 9th, 2009, 12:14 pm

Esta es una de mis luchas en curso - véase programming-forum/javascript-php-mysql-dynamic-table-form-t98858.html

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 7 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 176 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC