Volver al Programación / Codificación foro

Javascript, php y mysql - forma de tabla dinámica

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

Nota Julio 9th, 2009, 11:35 am

Estado luchando con esto desde alrededor de las 10 pm (2 a.m. ahora), y soy enfermo de google y mensajes de error - tiempo de pedir a los profesionales.

¿Qué Im tratando de hacer:

Si existe una entrada en la base de datos MySQL, llenar el cuadro con los datos de
de lo contrario, comenzar con una tabla en blanco y añadir filas de forma dinámica con cuadros de texto.
cuando el usuario presenta la forma, debe realizar la validación de los datos (es necesario un código válido de una lista)
entonces se debe enviar a la base de datos mysql (si ya existe, debe editar / eliminar según sea necesario)

¿Qué Ive consiguió hasta ahora:

Javascript & #058;
Código: [ Select ]
var initial_count = new Array();
var rows_limit = 0; // Set to 0 to disable limitation

function addRow(table_id)
{
var tbl = document.getElementById(table_id);
// counting rows in table
var rows_count = tbl.rows.length;
if (initial_count[table_id] == undefined)
{
    // if it is first adding in this table setting initial rows count
    initial_count[table_id] = rows_count;
}
// determining real count of added fields
var tFielsNum = rows_count - initial_count[table_id];
if (rows_limit!=0 && tFielsNum >= rows_limit) return false;
var text = 'Unit code:';
var input = '<input type="text" name="postvar[]" style="width:100%;"/>';
var remove= '<input type="button" value="Remove" onclick="removeRow(\''+table_id+'\',this.parentNode.parentNode)" style="width:100%;"/>';

try {
    var newRow = tbl.insertRow(rows_count);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = text;
    var newCell = newRow.insertCell(1);
    newCell.innerHTML = input;
    var newCell = newRow.insertCell(2);
    newCell.innerHTML = remove;
} catch (ex) {
    //if exception occurs
    alert(ex);
}
}

function removeRow(tbl,row)
{
var table = document.getElementById(tbl);
try {
    table.deleteRow(row.rowIndex);
} catch (ex) {
    alert(ex);
}
}
  1. var initial_count = new Array();
  2. var rows_limit = 0; // Set to 0 to disable limitation
  4. function addRow(table_id)
  5. {
  6. var tbl = document.getElementById(table_id);
  7. // counting rows in table
  8. var rows_count = tbl.rows.length;
  9. if (initial_count[table_id] == undefined)
  10. {
  11.     // if it is first adding in this table setting initial rows count
  12.     initial_count[table_id] = rows_count;
  13. }
  14. // determining real count of added fields
  15. var tFielsNum = rows_count - initial_count[table_id];
  16. if (rows_limit!=0 && tFielsNum >= rows_limit) return false;
  17. var text = 'Unit code:';
  18. var input = '<input type="text" name="postvar[]" style="width:100%;"/>';
  19. var remove= '<input type="button" value="Remove" onclick="removeRow(\''+table_id+'\',this.parentNode.parentNode)" style="width:100%;"/>';
  21. try {
  22.     var newRow = tbl.insertRow(rows_count);
  23.     var newCell = newRow.insertCell(0);
  24.     newCell.innerHTML = text;
  25.     var newCell = newRow.insertCell(1);
  26.     newCell.innerHTML = input;
  27.     var newCell = newRow.insertCell(2);
  28.     newCell.innerHTML = remove;
  29. } catch (ex) {
  30.     //if exception occurs
  31.     alert(ex);
  32. }
  33. }
  35. function removeRow(tbl,row)
  36. {
  37. var table = document.getElementById(tbl);
  38. try {
  39.     table.deleteRow(row.rowIndex);
  40. } catch (ex) {
  41.     alert(ex);
  42. }
  43. }


index.php:
Código: [ Select ]
<form id="form1" name="form1" method="post" action="setunits.php">
<h3>Set up units:</h3>

<table width="400" border="1" cellspacing="0" cellpadding="4" id="mytable">
    <tr><th colspan="3"><h3>Units</h3></th></tr>
    <tr><th colspan="3"><input type="button" name="Button" value="Add unit" onClick="addRow(\'mytable\')"></th></tr>
</table><br>
<input name="submitbutton" type="submit" value="Submit"/>
</form>
  1. <form id="form1" name="form1" method="post" action="setunits.php">
  2. <h3>Set up units:</h3>
  4. <table width="400" border="1" cellspacing="0" cellpadding="4" id="mytable">
  5.     <tr><th colspan="3"><h3>Units</h3></th></tr>
  6.     <tr><th colspan="3"><input type="button" name="Button" value="Add unit" onClick="addRow(\'mytable\')"></th></tr>
  7. </table><br>
  8. <input name="submitbutton" type="submit" value="Submit"/>
  9. </form>


setunits. PHP:
Código: [ Select ]
print_r ($_GET);


(ni idea de lo que esto debería ser)

¿Tiene problemas con:
Rellenar la tabla de MySQL (no acabo de hacer la tabla con php? No está seguro de qué hacer con el javascript)
De validación - comprobación de los datos con una lista en la base de datos
Obtener la matriz de la forma (ni idea de aquí)

Si lo he entendido todo lo que a finales de este mal hacer un tutorial completo sobre él.

En la acción:
http://uwadb.com/timetable/setup.php?id=units

Gracias por adelantado!
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Julio 9th, 2009, 11:35 am

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

Nota Julio 9th, 2009, 12:08 pm

y por index.php, me refiero a setup.php? id = unidades

El JavaScript parece estar nombrando a la mesa de entradas "postvar []". En caso de que?
  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8211
  • Loc: USA
  • Status: Offline

Nota Julio 9th, 2009, 1:16 pm

alex89 escribió:
El JavaScript parece estar nombrando las entradas de tabla "postvar []". ¿Debería?

Sí, debería hacerlo


Está utilizando método POST...por lo que deberían hacer las siguientes
Código: [ Select ]
print_r($_POST);

en lugar de
Código: [ Select ]
print_r($_GET);

La prueba que puse en mi LocalServer me da el siguiente
Código: [ Select ]
Array
(
    [postvar] => Array
        (
            [0] => asdf
            [1] => 543
            [2] => 543
            [3] => 876
            [4] => 6786
            [5] => 986
            [6] => 789
            [7] => 687
            [8] => 7986
            [9] => 978
            [10] => 687
            [11] => 9876
            [12] => 6
            [13] => 786
            [14] => 78
            [15] => gjh
            [16] => 78b 786
            [17] => 879
            [18] => 6b8
            [19] => 78b
            [20] => b687
            [21] => 76b
            [22] => ht78
            [23] => 6vb78
            [24] =>
            [25] => uyf5v67
            [26] => 5678
            [27] => 675v
            [28] => tf
            [29] => v76
            [30] => 7f
            [31] => v
        )
 
    [submitbutton] => Submit
)
  1. Array
  2. (
  3.     [postvar] => Array
  4.         (
  5.             [0] => asdf
  6.             [1] => 543
  7.             [2] => 543
  8.             [3] => 876
  9.             [4] => 6786
  10.             [5] => 986
  11.             [6] => 789
  12.             [7] => 687
  13.             [8] => 7986
  14.             [9] => 978
  15.             [10] => 687
  16.             [11] => 9876
  17.             [12] => 6
  18.             [13] => 786
  19.             [14] => 78
  20.             [15] => gjh
  21.             [16] => 78b 786
  22.             [17] => 879
  23.             [18] => 6b8
  24.             [19] => 78b
  25.             [20] => b687
  26.             [21] => 76b
  27.             [22] => ht78
  28.             [23] => 6vb78
  29.             [24] =>
  30.             [25] => uyf5v67
  31.             [26] => 5678
  32.             [27] => 675v
  33.             [28] => tf
  34.             [29] => v76
  35.             [30] => 7f
  36.             [31] => v
  37.         )
  38.  
  39.     [submitbutton] => Submit
  40. )
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de Usuario
  • Registrado: Jul 18, 2008
  • Mensajes: 239
  • Loc: Western Australia
  • Status: Offline

Nota Julio 9th, 2009, 10:50 pm

¡Oh, por supuesto. Gracias Bogey, usted es un salvavidas.

Todas las ideas acerca de poblar la tabla con los datos existentes?
  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8211
  • Loc: USA
  • Status: Offline

Nota Julio 9th, 2009, 11:18 pm

Tengo algunas ideas...
Código: [ Select ]
<?php
$ino = array('123','1234','1234','1234','1234','1234','1234');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UWAdb Timetable Setup</title>

<script language="javascript">

var initial_count = new Array();
var rows_limit = 0; // Set to 0 to disable limitation

function addRow(table_id)
{
var tbl = document.getElementById(table_id);
// counting rows in table
var rows_count = tbl.rows.length;
if (initial_count[table_id] == undefined)
{
    // if it is first adding in this table setting initial rows count
    initial_count[table_id] = rows_count;
}
// determining real count of added fields
var tFielsNum = rows_count - initial_count[table_id];
if (rows_limit!=0 && tFielsNum >= rows_limit) return false;
var text = 'Unit code:';
var input = '<input type="text" name="postvar[]" style="width:100%;"/>';
var remove= '<input type="button" value="Remove" onclick="removeRow(\''+table_id+'\',this.parentNode.parentNode)" style="width:100%;"/>';

try {
    var newRow = tbl.insertRow(rows_count);
    var newCell = newRow.insertCell(0);
    newCell.innerHTML = text;
    var newCell = newRow.insertCell(1);
    newCell.innerHTML = input;
    var newCell = newRow.insertCell(2);
    newCell.innerHTML = remove;
} catch (ex) {
    //if exception occurs
    alert(ex);
}
}

function removeRow(tbl,row)
{
var table = document.getElementById(tbl);
try {
    table.deleteRow(row.rowIndex);
} catch (ex) {
    alert(ex);
}
}
</script>

</head>
<body>
<div id="header"></div>
<div id="container">

<form id="form1" name="form1" method="post" action="setunits.php">
<h3>Set up units:</h3>
<table width="400" border="1" cellspacing="0" cellpadding="4" id="mytable">
    <tr><th colspan="3"><h3>Units</h3></th></tr>
    <tr><th colspan="3"><input type="button" name="Button" value="Add unit" onClick="addRow('mytable')"></th></tr>
<?php
foreach($ino as $info) :
?>
    <tr><td>Unit code:</td>
    <td> <input type="text" name="postvar[]" style="width:100%;" value="<?=$info;?>"></td>
    <td><input type="button" value="Remove" onclick="removeRow('my_table',this.parentNode.parentNode)" style="width:100%;"/></td></tr>
<?php
endforeach;
?>
</table><br>
<input name="submitbutton" type="submit" value="Submit"/>
</form>
</div>

</body>

</html>
  1. <?php
  2. $ino = array('123','1234','1234','1234','1234','1234','1234');
  3. ?>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <title>UWAdb Timetable Setup</title>
  10. <script language="javascript">
  12. var initial_count = new Array();
  13. var rows_limit = 0; // Set to 0 to disable limitation
  15. function addRow(table_id)
  16. {
  17. var tbl = document.getElementById(table_id);
  18. // counting rows in table
  19. var rows_count = tbl.rows.length;
  20. if (initial_count[table_id] == undefined)
  21. {
  22.     // if it is first adding in this table setting initial rows count
  23.     initial_count[table_id] = rows_count;
  24. }
  25. // determining real count of added fields
  26. var tFielsNum = rows_count - initial_count[table_id];
  27. if (rows_limit!=0 && tFielsNum >= rows_limit) return false;
  28. var text = 'Unit code:';
  29. var input = '<input type="text" name="postvar[]" style="width:100%;"/>';
  30. var remove= '<input type="button" value="Remove" onclick="removeRow(\''+table_id+'\',this.parentNode.parentNode)" style="width:100%;"/>';
  32. try {
  33.     var newRow = tbl.insertRow(rows_count);
  34.     var newCell = newRow.insertCell(0);
  35.     newCell.innerHTML = text;
  36.     var newCell = newRow.insertCell(1);
  37.     newCell.innerHTML = input;
  38.     var newCell = newRow.insertCell(2);
  39.     newCell.innerHTML = remove;
  40. } catch (ex) {
  41.     //if exception occurs
  42.     alert(ex);
  43. }
  44. }
  46. function removeRow(tbl,row)
  47. {
  48. var table = document.getElementById(tbl);
  49. try {
  50.     table.deleteRow(row.rowIndex);
  51. } catch (ex) {
  52.     alert(ex);
  53. }
  54. }
  55. </script>
  57. </head>
  58. <body>
  59. <div id="header"></div>
  60. <div id="container">
  62. <form id="form1" name="form1" method="post" action="setunits.php">
  63. <h3>Set up units:</h3>
  64. <table width="400" border="1" cellspacing="0" cellpadding="4" id="mytable">
  65.     <tr><th colspan="3"><h3>Units</h3></th></tr>
  66.     <tr><th colspan="3"><input type="button" name="Button" value="Add unit" onClick="addRow('mytable')"></th></tr>
  67. <?php
  68. foreach($ino as $info) :
  69. ?>
  70.     <tr><td>Unit code:</td>
  71.     <td> <input type="text" name="postvar[]" style="width:100%;" value="<?=$info;?>"></td>
  72.     <td><input type="button" value="Remove" onclick="removeRow('my_table',this.parentNode.parentNode)" style="width:100%;"/></td></tr>
  73. <?php
  74. endforeach;
  75. ?>
  76. </table><br>
  77. <input name="submitbutton" type="submit" value="Submit"/>
  78. </form>
  79. </div>
  81. </body>
  83. </html>
La única cosa, el botón de borrar no funciona no...
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de Usuario
  • Registrado: Jul 18, 2008
  • Mensajes: 239
  • Loc: Western Australia
  • Status: Offline

Nota Julio 10th, 2009, 8:32 am

Gracias Bogey. Yo hice lo siguiente:

Código: [ Select ]
        foreach ($units as $key => $value)
        {
        echo "<tr>";
        echo "<td>Unit code:</td><td><input name=\"postvar[]\" type=\"text\" style=\"width: 100%;\" value=\"$value\"/></td><td><input type=\"button\" style=\"width: 100%;\" onclick=\"removeRow('mytable',this.parentNode.parentNode)\" value=\"Remove\"/></td>";
        
        echo "</tr>";
        } 
  1.         foreach ($units as $key => $value)
  2.         {
  3.         echo "<tr>";
  4.         echo "<td>Unit code:</td><td><input name=\"postvar[]\" type=\"text\" style=\"width: 100%;\" value=\"$value\"/></td><td><input type=\"button\" style=\"width: 100%;\" onclick=\"removeRow('mytable',this.parentNode.parentNode)\" value=\"Remove\"/></td>";
  5.         
  6.         echo "</tr>";
  7.         } 



Demostración:
http://uwadb.com/timetable/setup.php?id=units
  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8211
  • Loc: USA
  • Status: Offline

Nota Julio 10th, 2009, 3:14 pm

¡Impresionante! Me alegra que tengo trabajo :)
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • alex89
  • Bronze Member
  • Bronze Member
  • Avatar de Usuario
  • Registrado: Jul 18, 2008
  • Mensajes: 239
  • Loc: Western Australia
  • Status: Offline

Nota Julio 11th, 2009, 4:34 am

El problema con el código de la tabla que se llamó "mitabla" y suprimir la JS fue "removeRow (" my_table ", this.pare notNode.pare notNode)"

:)
  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8211
  • Loc: USA
  • Status: Offline

Nota Julio 11th, 2009, 11:06 am

alex89 escribió:
El problema con el código de la tabla que se llamó "mitabla" y suprimir la JS fue "removeRow (" my_table ", this.pare notNode.pare notNode)"

:)
¡Oh, los pequeños errores hacen un mundo de diferencia :lol:
"Bring forth therefore fruits meet for repentance:" Matthew 3:8

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 9 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 97 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