en base de datos tabla html dinamica

hIUG · #1 (**permalink**) 09/05/2011, 14:27

Hola que tal, tengo el problema siguiente:

En una página web tengo una tabla dinámica a la que agrego elementos de un formulario, es decir, cada que se presiona un botón "agregar" el valor de los campos id y nombre se agregan a una tabla con columnas id y nombre; mi problema es que, necesito lograr guardar todas las filas que se registraron en la tabla, es decir, las que ingresó el usuario en una base de datos pero no se como.

Un punto importante que me ha dificultado más es que esto lo tengo que hacer con JSP (metí la pregunta en este tema por que no hay uno específico para JSP).

Entonces quiero saber si alguién me puede ayudar con esto, cómo puedo yo guardar la tabla que muestro al usuario que el mismo lleno en una base de datos mediante JSP, si se hacer el envío de formularios a una base de datos pero no es lo mismo.

Ayuda por favor.

Pablo Ayala · #2 (**permalink**) 09/05/2011, 14:57

Hola! que te parece si mandas un fragmento de tu codigo para poder ayudarte...

Saludos

hIUG · #3 (**permalink**) 09/05/2011, 15:14

Les adjunto mi código, esta tabla se va creando dinamicamente y luego quiero guardarla en una BD:

Código:

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Dynamic Table</title>

        <script language="javascript" type="text/javascript">
            // <!CDATA[
                function CmdAdd_onclick()
                {
                    var newTable,startTag,endTag,trContents;

                    //Creating a new table
                    startTag = "<table id='mainTable'><tbody><tr><td style=\"WIDTH: 120px\">USER ID</td><td style=\"WIDTH: 120px\">USER NAME</td><td style=\"WIDTH: 120px\">DEPARTAMENT</td></tr>";
                    endTag="</TBODY></TABLE>";

                    newTable=startTag;

                    //Get the row contents
                    trContents=document.body.getElementsByTagName('TR');

                    if(trContents.length>1)
                    {
                        for(i=1;i<trContents.length;i++)
                        {
                            if(trContents(i).innerHTML)
                            {
                                // Add previous rows
                                newTable+="<TR>";
                                newTable+=trContents(i).innerHTML;
                                newTable+="</TR>";
                            }
                        }
                    }

                    //Add the Latest row
                    newTable+="<TR><TD style=\"WIDTH: 120px\" >" +document.getElementById('userid').value +"</TD>";
                    newTable+="<TD style=\"WIDTH: 120px\" >" +document.getElementById('username').value +"</TD>";
                    newTable+="<TD style=\"WIDTH: 120px\" >" +document.getElementById('department').value +"</TD><TR>";
                    newTable+=endTag;

                    //Update the Previous Table With New Table.
                    document.getElementById('tableDiv').innerHTML=newTable;
                }
            // ]]>
        </script>
    </head>

    <body>
        <form id="form1" runat="server">
            <div>
                <br />
                <label>UserID_</label> 
                    <input id="userid" type="text" /><br />
                <label>UserName</label>
                    <input id="username" type="text" /><br />
                <label>Department</label> 
                    <input id="department" type="text" />

                <center>
                    <input id="CmdAdd1" type="button" value="B" onClick="CmdAdd_onclick()" />
                </center>
            </div>

            <div id="tableDiv" style="text-align:center" >
                <table id="mainTable">
                    <tr style="width:120px " >
                        <td >User ID</td>
                        <td>User Name</td>
                        <td>Department</td>
                    </tr>
                </table>
            </div>
        </form>
    </body>
</html>