Crear tablas dinámicas con Javascript

Posted on por

Estoy trabajando en una empresa de desarrollador Web. Sí. Lo he hecho. Así que me toca enfrentarme a mi querido Javascript. Y lo he hecho haciendo una pequeña página para crear controles de subida de ficheros de forma dinámica, al estilo gmail, pero pulsando en un botoncito.

Sin más os lo dejo, el código está muy comentado así que no es necesario decir mucho más ;).

< View plain text >
javascript

  1. &lt;script language="javascript"&gt;
  2. var numero = 0;
  3.  
  4. function addNewRow()
  5. {
  6.   // obtenemos acceso a la tabla por su ID
  7.   var TABLE = document.getElementById("tabla");
  8.   // obtenemos acceso a la fila maestra por su ID
  9.   var TROW = document.getElementById("celda");
  10.  
  11.   // tomamos la celda
  12.   var content = TROW.getElementsByTagName("td");
  13.  
  14.   // creamos una nueva fila
  15.   var newRow = TABLE.insertRow(-1);
  16.   newRow.className = TROW.attributes['class'].value;
  17.  
  18.   // creamos una nueva celda
  19.   var newCell = newRow.insertCell(newRow.cells.length)
  20.  
  21.   // creamos una nueva ID para el examinador
  22.   newID = 'file_' + (++numero);
  23.  
  24.   // creamos un nuevo control
  25.   txt = '&lt;input type="file" id="' + newID  + '" size="50" /&gt;'
  26.  
  27.   // y lo asignamos a la celda
  28.   newCell.innerHTML = txt
  29.  
  30.   // aviso ;)
  31.   alert(txt)
  32. }
  33.  
  34. function removeLastRow()
  35. {
  36.   // obtenemos la tabla
  37.   var TABLE = document.getElementById("tabla");
  38.  
  39.   // si tenemos mas de una fila, borramos
  40.   if(TABLE.rows.length &gt; 2)
  41.   {
  42.   TABLE.deleteRow(TABLE.rows.length-1);
  43.   --numero;
  44.   }
  45. }
  46.  
  47. function verElementos(evento)
  48. {
  49.   for (i=0; i&lt;=numero; i++)
  50.   {
  51.     var my_id = "file_" + i;
  52.     var my_file = document.getElementById(my_id);
  53.     alert ("id: " + my_id + " value: " + my_file.value);
  54.   }
  55. }
  56. &lt;/script&gt;
< View plain text >
HTML

  1. &lt;body&gt;
  2. &lt;table border="0" id="tabla" width="100%"&gt;
  3. &lt;tr class="celda"&gt;
  4. &lt;td colspan="3"&gt;Pulse [+] para añadir un examinador de archivos&lt;br/&gt;
  5. Pulse [-] para eliminar un examinador de archivos&lt;br/&gt;
  6. Desarrolladores =&gt; Pulse [v] para ver el contenido de los examinadores&lt;br/&gt;
  7. &lt;/td&gt;
  8. &lt;td&gt;
  9. &lt;input type="button" class="boton" value="[+]" onClick="addNewRow(event)" alt="Adicionar"&gt;&nbsp;
  10. &lt;input type="button" class="boton" value="[-]" onClick="removeLastRow(event)" alt="Remover"&gt;
  11. &lt;input type="button" class="boton" value="[v]" onClick="verElementos(event)" alt="Ver elementos"&gt;
  12. &lt;/td&gt;
  13. &lt;/tr&gt;
  14. &lt;tr id="celda" class="celda"&gt;
  15. &lt;td&gt;
  16. &lt;input id="file_0" name="files" type="file" size="50"&gt;
  17. &lt;/td&gt;
  18. &lt;/tr&gt;
  19. &lt;/table&gt;
  20. &lt;/body&gt;

Y aquí una demo, que molesta no tenerlas para este tipo de ocasiones.

Más tarde pondré las referencias que he utilizado, que las tengo en favoritos en otro equipo que no está ahora a mi alcance.

A 57 personas les gusta esta entrada

38 pensamientos en “Crear tablas dinámicas con Javascript”

  1. Excelente ejemplo de DOM (no DOOM jejeje).
    Me ha sacado de muchas dudas, además completamente adaptable a cualquier necesidad..
    Muchas gracias.

  2. Me alegra mucho que te haya servido Luis :).
    Próximamente publicaré un ejemplo con divs en lugar de con tablas, ya que en algunos sitios web no te permiten usar tablas por estética y demás 😛

    Un saludo.

  3. Excelente ejemplo:
    (tambien me llamo Luis)

    En realidad he estado buscando la forma de generar tablas dinamicamente, despues de peticiones mediante ajax, y que me pueda reconocer los elementos de formulario agregados.
    Generalmente pones una tabla con campos de texto, radio buttons, etc..
    El problema de hacerlo mediante ajax es que despues de generarlos al modificar valores en ellos, no son detectados y cuando llegas a hacer algun submit o envio de datos de formulario, se envian los valores con los que se genero el elemento.
    Yo logre que me reconiciera los elementos mediante un truco. Pero debe haber alguna forma de que se activen.

    El truco es. Modificar un atributo del elemento que se ha agregado y esta modificacion de atributo hacerla mediante javascript con las funciones que te permiten manejar el DOM y refiriendote a los elementos mediante su ID.

    Espero que sirva este truco. Y si tienes alguna solucion mas facil o que no sea truculenta sera bienvenida como siguiente tema.

  5. Gracias por los comentarios y por agregarme Luis :). La verdad que todavía no domino Ajax, he visto muy poquito (de momento), pero todo lo que dices tiene sentido, yo ahora mismo también modificaría mediante Javascript los atributos de los elementos creados previamente, para que no me cogiera sólo los valores originales en cada petición.

    Si tienes tiempo algún día, la comunidad internauta seguramente te agradecerá algo de código :).

    Un saludo.

  6. Bueno me doy un tiempito para explicar algo aca
    Cuando agregamos un control:
    Codigo:

    // evento onblur: se dispara cuando el elemento pierde el foco
    function ctrls(){
    var contenido=document.getElementById(«contenedor»);
    var tx=»»;
    tx +=’Titulo: ‘;
    tx +=»;
    tx +=’Imagen: ‘;
    tx +=»;
    contenido.innerHTML=tx;
    }
    function grabar(elm){
    // esta funcion actualiza el contenido del elemento editado
    elm.setAttribute(«value»,elm.value);
    }

  8. neonigma
    Gracias a tu ejemplo pude lograr hacer una aplicación interesante mezclando php y javascript.. De verdad que con tu explicación se me iluminó la bombilla y resolví mi problema.
    Aunque en php no tengo el problema del submit con elementos creados dinámicamente.

    lcornejo, cuando cambias el atributo del elemento creado dinamicamente entonces es reconocido por ajax.. hummm bien.
    Yo hice una solución parecida con un temporizador… haciendo un cambio de css a un div que contenian los nuevos elementos…. un poco artificial pero funcionó.

    saludos

    Sa

  9. @lcornejo: me temo que la única forma que conozco (por ahora) de incluir código html en wordpress sin que lo procese es sustuir los símbolos «menor que» por «(inserta_simbolo_de_ampersand_aqui)lt;» y «mayor que» por «(inserta_simbolo_de_ampersand_aqui)gt;». Me parece que se puede comentar la función texturize para que no ocurra esto, pero tengo que investigarlo un poco más. De momento, es una buena solución para postear código html.

    <html>
    <body>
    Esto es una prueba
    </body>
    </html>

    @Luis: anímate y comparte tu código en Internet. Verás como igualmente ayudas a mucha gente :).

  14. necesito crear una tabla dinamica que muestre la tabla de multiplicar en javascript como lo hago??????????? estoy ahora en un examen ayudenme porfa

  15. Muchas gracias por el código me ha sido de mucha utilidad, hasta en el trbajo me ha sido util, de verdad se agradece.

  17. Relacionado con el tema, necesito algo análogo a esto de dejar un comentario.
    ¿Como puedo añadir de forma dinámica los comentarios en la página?
    Consiguo grabar los comentarios en una base de datos Derbi, y desde el servlet leerlos y enviarlo al jsp de la siguente forma:
    rs = st.executeQuery(sql); // la típica select
    String texto = null;

    while (rs.next()) {
    texto +=»\n COMENTARIO: » + rs.getString(«COMENTARIO») +»»;

    }
    out.println(texto);
    Desde aquí con:
    txtcomentarios.innerHTML = conexion1.responseText;
    me mete en el div todas las lineas que recibe(«texto»), pero no consigo formatearlas como elementos individuales para tratarlos como haces tu.
    ¿Como lo haces?
    ¿Me puedes enviar el javascript?
    Yo utilizo java en el servlet y no PHP, pero supongo que es lo mismo ¿no?

  18. esta exelente pero una pregunta

    como puedo hacer para utlizar estas tablas dinamicas con php y mysql

    osea poder insertar todo lo que el usuario escriba en ellas insertarlas en mysql

    nose como hacerlos si podrian insertar un ejemplo

    gracias

  19. hola buenos dias me gusta muchisimo tu codigo y estoy comenzando con java scrip… quisiera utilizar ese codigo pero megustaria generar dos imput de tipo text para hacer un formulario para requisicion de materiales y de verdad no tengo ni idea de como hacerlo

  20. onClick=»verElementos(event)» Por que le pasas como argumento event? si no lo utilizas en ningun momento?. No se mucho de Js.
    O mejor dicho cuando se le pasa a una funcion el argumento event?

  21. Codigo sin desperdicio.
    ——–arhchivo prueba.xhtml ——

    prueba

    ————archivo jsFormDinamico.js———–
    //AUTOR: EDUARDO
    //EMAIL: eacevedof@yahoo.es
    //
    //CONOCEME UN POCO:
    //
    //Una de mis grandes manias es usar prefijos tanto para variables como
    //metodos y funciones, Por que?
    //1.- En lenguajes debilmente tipados tales como PHP, Javascript, ASP etc, sirve de informacion
    // sobre el tipo de dato que guarda esa variable.
    //
    //2.- Si trabajas en un entorno que tenga intelisense (ejemplo Eclipse, NetBeans, Visualstudio, Flex etc)
    // te sirve como filtro. Al buscar tus funciones sabes que todas comienzan por f, asi al presionar f
    // se listan tus variables y funciones con prefijo f.
    //
    //3.- Hace mas legible el codigo. A aquellos programadores noveles les va indicando
    // cual es la estructura del algoritmo. No es lo mismo definir una funcion:
    //
    // function Mifuncion(a,b,d){…} a su equivalente function fStrMifuncion(sA,iB,eD){…}
    //
    // La segunda te dice que es una funcion que devuelve una cadena (Str)
    // Recibe como 1er parametro un string, como segundo parametro un entero y como ultimo
    // un elemento Html.
    //
    // Ya para terminar… Con esto no pretendo crear un un control tipo Mootools, IUJquery u otros.
    // Creo que este codigo tiene mas fin didactio ya que esta totalmente en castellano.
    //
    //
    //PREFIJOS:
    //
    //ar=acronimo de array
    //b=acronimo de Boolean;
    //i= » de integer
    //s= » de string
    //o= » de objeto
    //e=elemento de DOM
    //p=procedimiento (en POO llamado metodo)
    //f=funcion o float
    //frm=formulario
    //div=Div
    //hid=Hidden
    //txt=Text
    //
    //**************************************************************
    //***********ZONA DE PARAMETROS DE LOS OBJETOS *****************//
    //**************************************************************
    ////Estas son las propiedades basicas para crear los elementos.
    //si quieres las puedes cambiar para ver el efecto que tienen
    //
    //arDIVFONDO: Son los parametros para el Div de fondo que evitara interaccionar con
    //los elementos (controles) que hay detras. Los que programan en .NET es el
    //equivalente a la opcion MODAL del formulario.
    var arDIVFONDO=new Array();
    arDIVFONDO[‘id’]=»divFondo»;
    arDIVFONDO[‘Alto’]=»0px»;
    arDIVFONDO[‘Ancho’]=»0px»;
    arDIVFONDO[‘ColorFondo’]=»#000″;
    arDIVFONDO[‘Opacidad’]=».5″;
    arDIVFONDO[‘Filtro’]=»alpha(opacity=50)»;
    arDIVFONDO[‘Posicion’]=»absolute»;
    arDIVFONDO[‘z’]=»1″;
    arDIVFONDO[‘y’]=»0px»;
    arDIVFONDO[‘x’]=»0px»;
    arDIVFONDO[‘Padding’]=»0px»;

    //arDIVFORM: Contenedor del formulario ojo con z pq su padre no es el arDIVFONDO
    //si fuera asi, todo se veria con opacidad asi que este, esta encima con z=2
    var arDIVFORM=new Array();
    arDIVFORM[‘id’]=»divForm»;
    arDIVFORM[‘Alto’]=»55px»;
    arDIVFORM[‘Ancho’]=»499px»;
    arDIVFORM[‘ColorFondo’]=»white»;
    arDIVFORM[‘Opacidad’]=».99″;
    arDIVFORM[‘Filtro’]=»alpha(opacity=100)»;
    arDIVFORM[‘Posicion’]=»absolute»;
    arDIVFORM[‘z’]=»2″;
    arDIVFORM[‘y’]=»0px»;
    arDIVFORM[‘x’]=»0px»;
    arDIVFORM[‘Padding’]=»10px»;

    //arFORM: Los atributos del formulario que ira dentro de divForm
    var arFORM=new Array();
    arFORM[‘id’]=»frmEditar»;
    arFORM[‘Nombre’]=»frmEditar»;
    arFORM[‘Metodo’]=»post»;
    arFORM[‘Accion’]=»contacto.php»;
    arFORM[‘Alto’]=»auto»;
    arFORM[‘Ancho’]=»auto»;
    arFORM[‘ColorFondo’]=»auto»;
    arFORM[‘Posicion’]=»relative»;
    arFORM[‘z’]=»2″;
    arFORM[‘y’]=»0px»;
    arFORM[‘x’]=»0px»;
    arFORM[‘Padding’]=»0″;

    //arTabla: La tabla que utilizare para ordenar los controles
    //se que esto no cumple con W3C Strict, pero si me ponia con fieldset se me
    //iba hacer muy largo. 2Filas una la cabecera y otra con los controles
    var arTABLA=new Array();
    arTABLA[‘id’]=»tabDetalles»;
    arTABLA[‘Filas’]=2;
    arTABLA[‘Columnas’]=5;
    arTABLA[‘Alto’]=»auto»;
    arTABLA[‘Ancho’]=»auto»;
    arTABLA[‘ColorFondo’]=»auto»;
    arTABLA[‘Posicion’]=»relative»;
    arTABLA[‘z’]=»2″;
    arTABLA[‘y’]=»0px»;
    arTABLA[‘x’]=»0px»;
    arTABLA[‘Borde’]=»1px solid red»;

    //arHIDDEN: Mi campo hidden necesario para enviarlo con POST y capturarlo con
    //PHP
    var arHIDDEN=new Array();
    arHIDDEN[‘Tipo’]=»hidden»;
    arHIDDEN[‘id’]=»hidFila»;
    arHIDDEN[‘Nombre’]=»hidFila»;
    arHIDDEN[‘Valor’]=»5″; //Modificar, es el campo clave del registro

    //arTXTCONCEP: Campo de texto «CONCEPTO»
    var arTXTCONCEP=new Array();
    arTXTCONCEP[‘Tipo’]=»text»;
    arTXTCONCEP[‘id’]=»txtConcep»;
    arTXTCONCEP[‘Nombre’]=»txtConcep»;
    arTXTCONCEP[‘Valor’]=»Diseño de tarjetas + impresion»; //Modificar
    arTXTCONCEP[‘Ancho’]=»250px»;

    //arTXTCONCEP: Campo de texto «CANTIDAD»
    var arTXTCANT=new Array();
    arTXTCANT[‘Tipo’]=»text»;
    arTXTCANT[‘id’]=»txtCant»;
    arTXTCANT[‘Nombre’]=»txtCant»;
    arTXTCANT[‘Valor’]=» 300,00 «; //Modificar
    arTXTCANT[‘Ancho’]=»70px»;

    //arBOTCANCELAR: Sirve para destruir las dos capas y permite seguir interactuando
    //con el formulario original
    var arBOTCANCELAR=new Array();
    arBOTCANCELAR[‘Tipo’]=»button»;
    arBOTCANCELAR[‘id’]=»botCancelar»;
    arBOTCANCELAR[‘Nombre’]=»botCancelar»;
    arBOTCANCELAR[‘Valor’]=»Cancelar»;
    arBOTCANCELAR[‘Ancho’]=»auto»;

    //arSUBACEPTAR: Sirve para enviar la informacion del formulario. (El submit de toda la vida).
    var arSUBACEPTAR=new Array();
    arSUBACEPTAR[‘Tipo’]=»submit»;
    arSUBACEPTAR[‘id’]=»subAceptar»;
    arSUBACEPTAR[‘Nombre’]=»subAceptar»;
    arSUBACEPTAR[‘Valor’]=»Aceptar»;
    arSUBACEPTAR[‘Ancho’]=»auto»;

    //**************************************************************
    //************** FIN ZONA DE PARAMETROS ********************//
    //**************************************************************

    //— AQUI EMPIEZA LO BUENO — //

    //VARIABLES «GLOBALES» (por lo de la G ;0)
    var oGVentana=null; //Pq «o»? pq esta clase no gestiona ningun elemento DOM
    var eGDivFondo=null;
    var eGDivForm=null;
    var eGFormulario=null;
    var eGTabla=null;
    var eGHidFila=null;
    var eGTxtConcep=null;
    var eGTxtCant=null;
    var eGbotCancelar=null;
    var eGSubAceptar=null;

    var bGFrmCreado=false;

    //CLASE VENTANA
    function CVentana()
    {
    var iAltura = 0; // height
    var iAnchura = 0; // width

    var pCalculaTamano=function()
    {
    if( typeof( window.innerHeight ) == ‘number’ )
    {
    iAltura = window.innerHeight;
    iAnchura = window.innerWidth;
    }
    else if( document.body && document.body.clientHeight )
    {
    //IE 4 o superior
    iAltura = document.body.clientHeight;
    iAnchura = document.body.clientWidth;
    }
    }

    pCalculaTamano();
    this.iAncho=iAnchura;
    this.iAlto=iAltura;

    this.getAncho=function()
    {
    return this.iAncho+»px»;
    }
    this.getAlto=function()
    {
    return this.iAlto+»px»;
    }
    }

    //CLASE FONDO
    //sIdPadre es el ID del div donde se insertara este, si se pasa null el padre
    //sera document.body
    function CDiv(arDiv, sIdPadre)
    {
    var ePadre=document.body;
    this.eDiv=document.createElement(‘div’);

    with(this.eDiv)
    {
    id=arDiv[‘id’];
    style.height=arDiv[‘Alto’];
    style.width=arDiv[‘Ancho’];
    style.backgroundColor=arDiv[‘ColorFondo’];
    style.opacity=arDiv[‘Opacidad’];
    style.filter=arDiv[‘Filtro’];//PARA IE
    style.position=arDiv[‘Posicion’];
    style.zIndex=arDiv[‘z’];
    style.top=arDiv[‘y’];
    style.left=arDiv[‘x’];
    style.padding=arDiv[‘Padding’];
    }

    if(sIdPadre==null)
    {
    ePadre.appendChild(this.eDiv);
    }
    else
    {
    ePadre=document.getElementById(sIdPadre);
    ePadre.appendChild(this.eDiv);
    }

    //GETS
    this.getID=function()
    {
    return this.eDiv.id;
    }
    this.getWidth=function()
    {
    return this.eDiv.offsetWidth;
    }

    this.getHeight=function()
    {
    return this.eDiv.offsetHeight;
    }

    this.getTop=function()
    {
    return this.eDiv.offsetTop;
    }

    this.getLeft=function()
    {
    return this.eDiv.offsetLeft;
    }

    //SETS
    this.setWidth=function(sValor)
    {
    this.eDiv.style.width=sValor;
    }

    this.setHeight=function(sValor)
    {
    this.eDiv.style.height=sValor;
    }

    this.setTop=function(sValor)
    {
    this.eDiv.style.top=sValor;
    }

    this.setLeft=function(sValor)
    {
    this.eDiv.style.left=sValor;
    }
    }

    //CLASE FORMULARIO
    function CForm(arForm, sIdPadre)
    {
    var ePadre=document.body;
    this.eForm=document.createElement(‘form’);

    with(this.eForm)
    {
    id=arForm[‘id’];
    setAttribute(«name», arForm[‘Nombre’]);
    setAttribute(«method», arForm[‘Metodo’]);
    setAttribute(«action», arForm[‘Accion’]);

    style.height=arForm[‘Alto’];
    style.width=arForm[‘Ancho’];
    style.backgroundColor=arForm[‘ColorFondo’];
    style.position=arForm[‘Posicion’];
    style.zIndex=arForm[‘z’];
    style.top=arForm[‘y’];
    style.left=arForm[‘x’];
    style.padding=arForm[‘Padding’];
    /*style.border=»1px solid green»;*/
    }

    if(sIdPadre==null)
    {
    ePadre.appendChild(this.eForm);
    }
    else
    {
    ePadre=document.getElementById(sIdPadre);
    ePadre.appendChild(this.eForm);
    }

    //GETS
    this.getID=function()
    {
    return this.eForm.id;
    }
    this.getWidth=function()
    {
    return this.eForm.offsetWidth;
    }

    this.getHeight=function()
    {
    return this.eForm.offsetHeight;
    }

    this.getTop=function()
    {
    return this.eForm.offsetTop;
    }

    this.getLeft=function()
    {
    return this.eForm.offsetLeft;
    }

    //SETS
    this.setWidth=function(sValor)
    {
    this.eForm.style.width=sValor;
    }

    this.setHeight=function(sValor)
    {
    this.eForm.style.height=sValor;
    }

    this.setTop=function(sValor)
    {
    this.eForm.style.top=sValor;
    }

    this.setLeft=function(sValor)
    {
    this.eForm.style.left=sValor;
    }
    }

    //CLASE INPUT boton, texto, hidden submit..
    function CInput(arInput, eParent)
    {
    var ePadre=document.body;
    this.eInput=document.createElement(‘input’);

    with(this.eInput)
    {
    setAttribute(«type», arInput[‘Tipo’]);
    id=arInput[‘id’];
    setAttribute(«name», arInput[‘Nombre’]);
    setAttribute(«value», arInput[‘Valor’]);
    //Estilo
    style.width=arInput[‘Ancho’];
    }

    if(arInput[‘Tipo’]==»button»)
    {
    //Registramos los eventos
    //http://www.w3.org/TR/DOM-Level-2-Events/events.html
    if(document.all) //ES IE
    {
    this.eInput.attachEvent(«onclick», pCancelar);
    }
    else //OTROS NAVEGADORES
    {
    this.eInput.addEventListener(«click», pCancelar, true);
    }
    }

    function pCancelar()
    {
    var eDivAux = document.getElementById(eGDivForm.getID());
    document.body.removeChild(eDivAux);

    eDivAux = document.getElementById(eGDivFondo.getID());
    document.body.removeChild(eDivAux);

    //Destruyo mis objetos
    oGVentana=null;
    eGDivFondo=null;
    eGDivForm=null;
    eGFormulario=null;
    eGTabla=null;
    eGHidFila=null;
    eGTxtConcep=null;
    eGTxtCant=null;
    eGbotCancelar=null;
    eGSubAceptar=null;

    //Actualizo mi variable
    bGFrmCreado=false;
    }

    if(eParent==null)
    {
    ePadre.appendChild(this.eInput);
    }
    else
    {
    eParent.appendChild(this.eInput);
    }

    //GETS
    this.getID=function()
    {
    return this.eInput.id;
    }

    this.getValor=function()
    {
    return this.eInput.value;
    }

    this.getWidth=function()
    {
    return this.eInput.offsetWidth;
    }

    //SETS
    this.setWidth=function(sValor)
    {
    this.eInput.style.width=sValor;
    }
    }

    //CLASE TABLA
    function CTabla(arTabla, sIdPadre)
    {
    var arTextos=new Array();
    arTextos[0]=»F»;
    arTextos[1]=»CONCEPTO»;
    arTextos[2]=»CANTIDAD»;
    arTextos[3]=»»;
    arTextos[4]=»»;

    var ePadre=document.body;
    this.eTable=document.createElement(‘table’);

    with(this.eTable)
    {
    id=arTabla[‘id’];
    setAttribute(«name», arTabla[‘Nombre’]);

    style.height=arTabla[‘Alto’];
    style.width=arTabla[‘Ancho’];
    style.backgroundColor=arTabla[‘ColorFondo’];
    style.position=arTabla[‘Posicion’];
    style.zIndex=arTabla[‘z’];
    style.top=arTabla[‘y’];
    style.left=arTabla[‘x’];
    style.padding=arTabla[‘Padding’];
    style.border=arTabla[‘Borde’];
    }
    //Genero la tabla
    for(var i=0; i<arTabla['Filas']; i++)
    {
    var auxTR=document.createElement("tr");
    for(var j=0; j<arTabla['Columnas']; j++)
    {
    var auxTD=document.createElement("td");
    var auxText;
    if(i==0) //Es la cabecera
    {
    auxText=document.createTextNode(arTextos[j]);
    auxTD.appendChild(auxText);
    }
    else //El resto de filas
    {
    switch (j)
    {
    case 0:
    eGHidFila = new CInput(arHIDDEN, auxTD);
    auxText=document.createTextNode(eGHidFila.getValor());
    auxTD.appendChild(auxText);
    break
    case 1:
    eGTxtConcep = new CInput(arTXTCONCEP, auxTD);
    break
    case 2:
    eGTxtCant = new CInput(arTXTCANT, auxTD);
    break
    case 3:
    eGSubAceptar = new CInput(arSUBACEPTAR, auxTD);
    break
    case 4:
    eGbotCancelar = new CInput(arBOTCANCELAR, auxTD);
    break
    default:
    document.write("Esta columna no existe!!");
    }
    }
    auxTR.appendChild(auxTD);
    }
    this.eTable.appendChild(auxTR);
    }

    if(sIdPadre==null)
    {
    ePadre.appendChild(this.eTable);
    }
    else
    {
    ePadre=document.getElementById(sIdPadre);
    ePadre.appendChild(this.eTable);
    }

    //GETS
    this.getID=function()
    {
    return this.eTable.id;
    }
    this.getWidth=function()
    {
    return this.eTable.offsetWidth;
    }

    this.getHeight=function()
    {
    return this.eTable.offsetHeight;
    }

    this.getTop=function()
    {
    return this.eTable.offsetTop;
    }

    this.getLeft=function()
    {
    return this.eTable.offsetLeft;
    }

    //SETS
    this.setWidth=function(sValor)
    {
    this.eTable.style.width=sValor;
    }

    this.setHeight=function(sValor)
    {
    this.eTable.style.height=sValor;
    }

    this.setTop=function(sValor)
    {
    this.eTable.style.top=sValor;
    }

    this.setLeft=function(sValor)
    {
    this.eTable.style.left=sValor;
    }
    }

    //Procedimiento que vincularas a un evento Click y que dara como resultado
    //la generacion del formulario
    function pClick()
    {
    //Objeto ventana obtiene el tamaño de la pantalla
    //necesario para el centrado y el recubrimiento de los controles
    oGVentana = new CVentana();

    //El elemento Div con opacidad
    eGDivFondo= new CDiv(arDIVFONDO,null);
    eGDivFondo.setWidth(oGVentana.getAncho());
    eGDivFondo.setHeight(oGVentana.getAlto());

    //El elemento Div contenedor del formulario
    eGDivForm = new CDiv(arDIVFORM, null);

    //Centro el contenedor en pantalla
    var aux=(eGDivFondo.getWidth()-eGDivForm.getWidth())/2 + "px";
    eGDivForm.setLeft(aux);
    aux=(eGDivFondo.getHeight()-eGDivForm.getHeight())/2 + "px";
    eGDivForm.setTop(aux);

    //Creo el Formulario y lo adjunto a su padre el eGDivForm
    eGFormulario=new CForm(arFORM, eGDivForm.getID());

    //Creo la Tabla (para tabular mis controles) y lo adjunto a su padre eGFormulario
    eGTabla=new CTabla(arTABLA, eGFormulario.getID());

    //Indico que se ha generado el formulario, esto me servira para
    //el evento que se ejecuta cuando se redimensiona la pantalla
    bGFrmCreado=true;
    }

    window.onresize = function ()
    {
    if(bGFrmCreado)
    {
    //Creo nuevamente oVentana para actualizar su tamaño
    oGVentana = new CVentana();
    //Redimensiono el Div con opacidad
    eGDivFondo.setWidth(oGVentana.getAncho());
    eGDivFondo.setHeight(oGVentana.getAlto());

    //centro divForm
    var aux=(eGDivFondo.getWidth()-eGDivForm.getWidth())/2 + "px";
    eGDivForm.setLeft(aux);
    aux=(eGDivFondo.getHeight()-eGDivForm.getHeight())/2 + "px";
    eGDivForm.setTop(aux);
    }
    }

  22. Hola me gustaria saber como dar un alto y ancho a la celda en el ejemplo de este post.

    muchas gracias

    saludos!

    PD: Excelente post!

  23. que tal… he estado rondeando por esta pagina.. y me preguntab si me podrian ayudar en desarrollar… lo siguiente..!!

    1. Se debe proveer de una función de inicio que reciba como argumento el nombre de la base de datos y de la tabla.
    2. Se deben mostrar dos botones independientes del formulario con los textos siguientes; {«guardar», «generar»}
    3. Dado el nombre de la tabla accesar la base de datos para obtener toda la información relevante de cada campo para poder crear de manera dinámica el formulario donde:
    a. El nombre de las etiquetas de texto debe ser el nombre del campo.
    b. El campo de texto para la captura debe ser de las dimensiones de acuerdo a la especificación del campo.
    c. Crear de forma dinámica un archivo de código JavaScript donde se guarde el código para Validar el campo de acuerdo al tipo de datos del campo.(js)prototype esto se genera del noton enviar!!
    d. El método a utilizar en el atributo «method» del la etiqueta debe ser «POST» el nombre de la aplicación para el atributo «action» debe ser «prefijoNombreTabla.php», donde prefijo puede ser {«alta», «baja», «cambio»}

    Lado cliente. Para el lado cliente se debe utilizar HTML, CSS, XML, DOM y JavaScript.
    Lado servidor. Para el lado servidor se debe utilizar PHP, XML y DOM.
    Nota: En ambos lados se debe utilizar programación orientada a objetos.
    El contenido de los mensajes entre cliente y servidor debe estar en XML
    El contenido de los mensajes entre servidor y cliente debe estar en XML

    espero me pueda ayudar..!!!! vale. saludos..!!

    see you..!!!

  24. todo lo anterios lo utilizare par ala creacion de ::

    Diseñar una aplicación Web que en la parte cliente presente al usuario una interfaz visual para diseñar formularios para la captura y validación de tablas de una base de datos.

    deacuerdo a loanterios.!!!

  26. Hola, me ha servido mucho vuestra ayuda para crear las tablas de una forma dinamica

    A ver si me podeis hechar una mano, mi tabla es de la siguiente forma

    if(document.getElementById(tabla).Rows.length==0)
    {
    lin=document.getElementById(tabla).insertRow(document.getElementById(tabla).Rows.length);
    lin.insertCell(lin.cells.length);lin.innerHTML=»cabecera tabla»
    }
    lin=document.getElementById(tabla).insertRow(document.getElementById(tabla).Rows.length);
    lin.insertCell(lin.cells.length);lin.innerHTML=»descripcion objeto»
    lin.insertCell(lin.cells.length);lin.appenChild(object)
    esto crea una tabla o/e inserta una linea segun si ya hay lineas o no poniendo la primera como titulo de una tabla con una linea inicial que seria el tipico colspan(2) y bajo lineas de dos columnas

    el caso es que si acontinuacion de crear la linea de cabecera hago un td.colspan(2) se raya y no sigue ejecutando codigo.A ver si podeis hecharme una mano

    Muchas gracias

  27. Excelente código mi estimado, y mejor aún, comentado; sólo un detalle, sería bueno que cuando tienes sólo un elemento desaparezca el botón de quitar elemento. Cómo ves?

    Saludos.

  28. Lo veo muy bien Pepe. De todas, como «prueba que demuestra que funciona algo», me funcionó bastante bien en su momento. Ya ni siquiera desarrollo Web 🙂

    Un saludo.

  29. Tienes toda la razón, pero para nosotros caer en este tipo de sitios son de gran ayuda y más cuando estás verdaderamente atorado con un código. Ahora estoy rearmando tu código para hacer que generé doble campo y meter en un arreglo las variables para recibirlas en otra parte, finalmente adaptando el código a la necesidad que ahora tengo. Mil gracias por tu ayuda.

    Saludos desde México

  30. Mil gracias a ti, y te animo a compartir también tu código por cualquier vía. Seguro que más gente lo encontrará interesante.

    Un saludo.

  31. como creo una tabla de bingo utilizando el dom, que cuendo le de clic en un texto(no boton) genere nuevos numeros en la tabla del bingo
    B I N G O
    1 2 3 4 5
    6 7 8 9 10
    11 12 13 14 15
    16 17 18 19 20

    en la tabla se generan 19 numeros aleatorios cuando da clic en un texto, la posicion numero 13 de la tabla va vacia
    Utilizando el dom como puedo hacer el ejercicio

  34. Buenas Amigos me podrian ayudar con un codigo tengo campos q ingreso con mi appenchild pero no se como capturar el arreglo para poder grabarlos en mi bd

    GRacias

  35. Hola neonigma , excelente el manejo de javascript , tengo una consulta estoy usando fileupload en java para obtener las referencias a los archivos. He incrustado tu codigo en mi desarrollo, pero al momento de hacer el submmit , obtengo solo la informacion del primer input , y los otros son ignorados , tienes alguna idea de que puede ser. Gracias

  37. Estimados,
    Me parece genial Lo Posteado anterior, Pero tengo un problema relacionado….
    tengo dos Tablas html A, B
    en tabla A- tengo 10 checkboxA, con 10 etiquetas al lado de cada checkbox
    en tabla B- tengo 10 checkboxB, con 10 etiquetas al lado de cada checkbox
    En medio de las 2 tablas existen 2 imagenes/botones
    1-Asignar
    2-DesAsignar

    Directo al grano necesito que mediante Java Script Al presionar o chickear en un Checkbox de la tabla A desaparezca en A y Aparezca en tabla B y Viceverza….

    Alguna ayuda porfavor, Estoy haciendo mi practica y aun estoy en «pañales» como se dice
    Gracias Saludos!!!!

  38. Gracias por los aportes son bastante buenos, ahora a llevarlos a la practica Gracias

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *