//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);
}
}
Formulario Dinámico en javascript 
