Volver al Programación / Codificación foro

Agregar filas a la tabla html y actualizar todo a mysql

  • CaptainFourpack
  • Born
  • Born
  • No Avatar
  • Registrado: Abr 18, 2012
  • Mensajes: 2
  • Status: Offline

Nota Abril 18th, 2012, 2:51 pm

Hola chicos y chicas

Soy nuevo en el Foro y js y php. He encontrado un montón de ayuda a través de navegando en este foro (¡ Hola a todos y gracias!).

Im han prestado y adaptado algún código que encontré aquí:
http://www.ozzu.com/programming-forum/add-rows-html-and-send-mysql-t106931.htmlpero tengo un par de cuestiones y se preguntaba si podría ayudar.

Estoy tratando de hacer una tabla html que contiene los datos tomados de mi tabla DB llamada a votar. Con esto quiero el usuario para poder editar la tabla, así como agregar nuevas filas. Cuando llegan actualización, quiero todas las entradas a actualizarse en la DB (agregan nuevas filas, eliminar filas eliminadas y actualiza los cambios).

Mi página principal, incluido el formulario html y javascript se codifica como sigue:
Código: [ Select ]
<html>
    <head>
        <script type="text/javascript">
            function addRow(tableID) {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;
                var row = table.insertRow(rowCount);
                var colCount = table.rows[0].cells.length;
                for(var i=0; i<colCount; i++) {
                    var newcell = row.insertCell(i);
                    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                    switch(newcell.childNodes[0].type) {
                        case "text":
                            newcell.childNodes[0].value = "0";
                            break;
                        case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    }
                }
            }
            function deleteRow(tableID) {
                try {
                    var table = document.getElementById(tableID);
                    var rowCount = table.rows.length;
                    for(var i=0; i<rowCount; i++) {
                        var row = table.rows[i];
                        var chkbox = row.cells[0].childNodes[0];
                        if(null != chkbox && true == chkbox.checked) {
                            if(rowCount <= 1) {
                                alert("Cant delete all rows, simply update the text and count on last remaining row");
                                break;
                            }
                            table.deleteRow(i);
                            rowCount--;
                            i--;
                        }
                    }
                }catch(e) { alert(e); }
            }
        </script>
    </head>
    <body>
        <div id="header">
            <h1 style="margin-bottom:0;">Admin Page</h1>
            <br />
        </div>
        
        <?php
            $con = mysql_connect("myDB","dbnameremoved","passwordremoved");
            if (!$con){ die('Could not connect: ' . mysql_error()); }
            else
            {
                mysql_select_db("dbnameremoved", $con);
                $result = mysql_query("SELECT * FROM voting");
            }
            echo "<style type='text/css'>";
            echo "table,tr,td{border:0px solid black;}";
            echo "</style>";
            echo "<table id='titlebar' cellspacing='0px'>";
                echo "<tr>";
                    echo "<td style='width:20px;'>&#10003;</td>";
                    echo "<td style='width:200px;'>Text</td>";
                    echo "<td style='width:25px;'>Count</td>";
                echo "</tr>";
            echo "</table>";
            echo "<form action='send.php' method='POST'>";
                echo "<table id='dataTable' width='auto' style='margin:-4px 0 0 0;' cellspacing='0px'>";
            while($row = mysql_fetch_array($result))
            {
                echo "<tr>";
                echo "<td style='width:20px;'><INPUT type='checkbox' name='chk' /></td>";
                echo "<td><INPUT type='text' name='voteText[" . $row['id'] . "]' style='width:200px;' value='" . $row['text'] . "' autocomplete='on' placeholder='Show' required/></td>";
                echo "<td><INPUT type='text' name='voteCount[" . $row['id'] . "]' style='width:25px;' value='" . $row['count'] . "' autocomplete='on' placeholder='Show' required/></td>";
                echo "</tr>";
            }
        ?>
        </table>
        <INPUT type="button" value="Add row" onclick="addRow('dataTable')" />
        <INPUT type="button" value="Delete row" onclick="deleteRow('dataTable')" />
        <INPUT type="submit" value="Update"/>
        </form>
    </body
</html>
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.             function addRow(tableID) {
  5.                 var table = document.getElementById(tableID);
  6.                 var rowCount = table.rows.length;
  7.                 var row = table.insertRow(rowCount);
  8.                 var colCount = table.rows[0].cells.length;
  9.                 for(var i=0; i<colCount; i++) {
  10.                     var newcell = row.insertCell(i);
  11.                     newcell.innerHTML = table.rows[0].cells[i].innerHTML;
  12.                     switch(newcell.childNodes[0].type) {
  13.                         case "text":
  14.                             newcell.childNodes[0].value = "0";
  15.                             break;
  16.                         case "checkbox":
  17.                             newcell.childNodes[0].checked = false;
  18.                             break;
  19.                     }
  20.                 }
  21.             }
  22.             function deleteRow(tableID) {
  23.                 try {
  24.                     var table = document.getElementById(tableID);
  25.                     var rowCount = table.rows.length;
  26.                     for(var i=0; i<rowCount; i++) {
  27.                         var row = table.rows[i];
  28.                         var chkbox = row.cells[0].childNodes[0];
  29.                         if(null != chkbox && true == chkbox.checked) {
  30.                             if(rowCount <= 1) {
  31.                                 alert("Cant delete all rows, simply update the text and count on last remaining row");
  32.                                 break;
  33.                             }
  34.                             table.deleteRow(i);
  35.                             rowCount--;
  36.                             i--;
  37.                         }
  38.                     }
  39.                 }catch(e) { alert(e); }
  40.             }
  41.         </script>
  42.     </head>
  43.     <body>
  44.         <div id="header">
  45.             <h1 style="margin-bottom:0;">Admin Page</h1>
  46.             <br />
  47.         </div>
  48.         
  49.         <?php
  50.             $con = mysql_connect("myDB","dbnameremoved","passwordremoved");
  51.             if (!$con){ die('Could not connect: ' . mysql_error()); }
  52.             else
  53.             {
  54.                 mysql_select_db("dbnameremoved", $con);
  55.                 $result = mysql_query("SELECT * FROM voting");
  56.             }
  57.             echo "<style type='text/css'>";
  58.             echo "table,tr,td{border:0px solid black;}";
  59.             echo "</style>";
  60.             echo "<table id='titlebar' cellspacing='0px'>";
  61.                 echo "<tr>";
  62.                     echo "<td style='width:20px;'>&#10003;</td>";
  63.                     echo "<td style='width:200px;'>Text</td>";
  64.                     echo "<td style='width:25px;'>Count</td>";
  65.                 echo "</tr>";
  66.             echo "</table>";
  67.             echo "<form action='send.php' method='POST'>";
  68.                 echo "<table id='dataTable' width='auto' style='margin:-4px 0 0 0;' cellspacing='0px'>";
  69.             while($row = mysql_fetch_array($result))
  70.             {
  71.                 echo "<tr>";
  72.                 echo "<td style='width:20px;'><INPUT type='checkbox' name='chk' /></td>";
  73.                 echo "<td><INPUT type='text' name='voteText[" . $row['id'] . "]' style='width:200px;' value='" . $row['text'] . "' autocomplete='on' placeholder='Show' required/></td>";
  74.                 echo "<td><INPUT type='text' name='voteCount[" . $row['id'] . "]' style='width:25px;' value='" . $row['count'] . "' autocomplete='on' placeholder='Show' required/></td>";
  75.                 echo "</tr>";
  76.             }
  77.         ?>
  78.         </table>
  79.         <INPUT type="button" value="Add row" onclick="addRow('dataTable')" />
  80.         <INPUT type="button" value="Delete row" onclick="deleteRow('dataTable')" />
  81.         <INPUT type="submit" value="Update"/>
  82.         </form>
  83.     </body
  84. </html>


...y mi página send.php actualmente sólo está tratando de recorrer en iteración los resultados (he comentado en mi intento de lo que yo quiero hacer eventualmente, sans el bucle que obviamente necesitará)

Send.php
Código: [ Select ]
<?php
    
    print_r($_POST);
    echo "<br /><br />";
    
    foreach($_POST['voteText'] as $key => $value) {
        echo "voteText[$key]=$value<br>";
    }
    echo "<br /><br />";
    foreach($_POST['voteCount'] as $key => $value) {
        echo "voteText[$key]=$value<br>";
    }
    
    /*
    $con = mysql_connect("myDB","dbnameremoved","passwordremoved");
    if (!$con) { die('Could not connect: ' . mysql_error()); }
    else
    {
        mysql_select_db("totemvote", $con);
        
        $textV = mysql_real_escape_string(stripslashes($_POST['voteText']));
        $countV = mysql_real_escape_string(stripslashes($_POST['voteCount']));
        
        $sql="DELETE * from voting";
        if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); }
        
        $sql="INSERT INTO voting (text, count) VALUES ('$textV','$countV')";
        if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); }
        echo "Database updated";
        mysql_close($con);
    }
    */
?>
  1. <?php
  2.     
  3.     print_r($_POST);
  4.     echo "<br /><br />";
  5.     
  6.     foreach($_POST['voteText'] as $key => $value) {
  7.         echo "voteText[$key]=$value<br>";
  8.     }
  9.     echo "<br /><br />";
  10.     foreach($_POST['voteCount'] as $key => $value) {
  11.         echo "voteText[$key]=$value<br>";
  12.     }
  13.     
  14.     /*
  15.     $con = mysql_connect("myDB","dbnameremoved","passwordremoved");
  16.     if (!$con) { die('Could not connect: ' . mysql_error()); }
  17.     else
  18.     {
  19.         mysql_select_db("totemvote", $con);
  20.         
  21.         $textV = mysql_real_escape_string(stripslashes($_POST['voteText']));
  22.         $countV = mysql_real_escape_string(stripslashes($_POST['voteCount']));
  23.         
  24.         $sql="DELETE * from voting";
  25.         if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); }
  26.         
  27.         $sql="INSERT INTO voting (text, count) VALUES ('$textV','$countV')";
  28.         if (!mysql_query($sql,$con)) { die('Error: ' . mysql_error()); }
  29.         echo "Database updated";
  30.         mysql_close($con);
  31.     }
  32.     */
  33. ?>


Tengo dos problemas, uno más grave que el otro.

En primer lugar, en el JS, me gustaría añadir valores predeterminados para las nuevas filas que el "texto" el campo está vacío, mientras que el campo "número" contiene un cero. En el post original prestado desde, la declaración de swithc JS tiene varios casos de newcell.childNodes[0].type = "text". No entiendo por qué, como seguramente se rompe después de encontrar el primer caso para ser verdad! He tratado de agregar si declaraciones allí basan en contador de th para rellenar el valor con lo que quiero, con resultados imprevisibles. Por favor informar si puede u.

En segundo lugar, en mi send.php, tengo problemas para recibir todas las filas de datos. En mis pruebas tengo dos filas en el DB, que se muestran muy bien. Si añadir dos filas más (por ejemplo), el gong de bucles a través de mis arreglos en send.php contienen sólo dos valores, uno de los dos conjuntos de datos originales tenía en DB y la última de las filas agregadas.

Im adivinar que se trata de algo que ver con mi JS creación de nodos secundarios, pero estoy en una pérdida. Una vez más, consejos de andy es muy apreciada.

Espero que he presentado este bien y gracias en previsión de cualquier tipo de ayuda puede ofrecer.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Abril 18th, 2012, 2:51 pm

  • CaptainFourpack
  • Born
  • Born
  • No Avatar
  • Registrado: Abr 18, 2012
  • Mensajes: 2
  • Status: Offline

Nota Abril 22nd, 2012, 1:09 pm

¿Nadie puede ofrecer cualquier asesoramiento?

Gracias en anticipación...

Página 1 de 1

Publicar Información

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