Lio con document.createElement()

[augusto_jaramil]

Holas a tod@s,

Estoy creando un script que permita hacer diseño de reportes. La idea es que el usuario indica el numero de columnas que contiene el reporte. En ese momento hago el llamado a una funcion que crea la(s) columna(s) con sus respectivos atributos.

Este es codigo de la funcion:

Código PHP:

  function crearFilas() {
/*
   var grups = document.getElementById("grupos").value;
   str = grups.trim();
*/
   var cols = document.getElementById("cols").value;
 
   var tr = document.createElement("tr");
   document.getElementById("reporte").appendChild(tr);
 
   i = 0;
   for (i=0;i<cols;i++) {
       idname = "col"+i;
       var nuevoTD = document.createElement("td");
            nuevoTD.innerHTML=idname;
       document.getElementById("reporte").appendChild(nuevoTD);
 
       var input = document.createElement("input");
            input.setAttribute("type", "text");
            input.setAttribute("id", idname);
            input.setAttribute("name", idname);
            input.setAttribute("class", "claseinput");
            input.setAttribute("style", "width:30px;");
            input.setAttribute("onChange", "verificaInput("+i+")");
       document.getElementById("reporte").appendChild(input);
   }
   var el = document.getElementById("reporte");
   el.style.display = "block";
} 
   

Esta función canciona bien desde el punto de vista que crea las columnas que se desean, el lío es que crea una fila por columna y quiero que en una sola fila se creen las columnas...

Algun@ de ustedes me puede indicar como lo puedo hacer?

Gracias de antemano por su ayuda

Un Cordial Saludo

[Franz1628]

Debes añadir el input al tr

cambia esta linea
document.getElementById("reporte").appendChild(inp ut);
por esta
nuevoTD.appendChild(input);

[augusto_jaramil]

Uyyyy papá..... usted si sabe donde ponen las garzas


Mil Gracias Frnz1628.... cancionó la vaina

[augusto_jaramil]

Hola de nuevo,

Continuando con el tema, el script me está funcionando casi bien....

Resulta que en esta parte de la funcion

Código PHP:

  function crear() {
   tr = document.createElement("tr");
 
   k = 1;
   g = 1;
   col_orig = cols;
   cols = grups*cols;
   for (j=0;j<cols;j++) {
       idnamec = "col"+k+"_"+g;
       nuevoTD = document.createElement("td");
            nuevoTD.setAttribute("colspan", "1");
       tbl.appendChild(nuevoTD);
 
       input = document.createElement("input");
            input.setAttribute("type", "text");
            input.setAttribute("id", idnamec);
            input.setAttribute("name", idnamec);
            input.setAttribute("value", "Titulo columna "+k);
            input.setAttribute("class", "claseinput");
            input.setAttribute("style", "width:140px; text-align:center; color:red;");
            input.setAttribute("onChange", "verificaInput(idnamec);");
       nuevoTD.appendChild(input);
       tbl.appendChild(nuevoTD);
       k = k+1;
       if (k>col_orig) {
          g = g+1;
          k=1;
       }
   }
   tbl.appendChild(tr);
   reporte.appendChild(tbl);
}
 
function verificaInput(id) {
alert(id);
   alert(document.getElementById(id).value);
} 
   

Se trata de lo siguiente:
El usuario desea crear dos grupos de columnas con tres columnas cada grupo (total de columnas 6). Con este script pretendo asignarle el atributo ID a cada INPUT TEXT definido como col[grupo]_[columna]. Es decir que el ID de la primera columna del grupo 1 seria col1_1, el ID de la primera columna del segundo grupo seria col2_1... Asi lo defino en la segunda linea del script y le asigno el atributo en la linea 8.

Para verificar esto le asigno otro atributo, onChange=verificaInput(idnamec); en la linea 19 del script. Al realizar una prueba del script veo con gran sorpresa que todos los ID son iguales al ultimo ID asignado, es decir, todos los ID son col3_2

Como puedo lograr que cada input text tenga el id correspondiente?

Mil gracias de antemano

Un Cordial Saludo

[Franz1628]

pon completo el código

[augusto_jaramil]

Ok Don Franz1628, ahi va,

Código PHP:

  String.prototype.trim = function() { return this.replace(/^s+|s+$/g, ""); };
 
function crearFilas() {
 
   var reporte = document.getElementById("reporte");
 
   var grups = document.getElementById("grupos").value;
   str = grups.trim();
   var grups = str;
 
   var cols = document.getElementById("cols").value;
   str = cols.trim();
   var cols = str;
 
   tbl = document.createElement("table");
   tr = document.createElement("tr");
 
   i = 0;
   k = 1;
   largo = ((140*cols)+(3*cols));
   for (i=0;i<grups;i++) {
       idnameg="grp"+k+"_0";
       nuevoTD = document.createElement("td");
            nuevoTD.setAttribute("colspan", cols);
       tbl.appendChild(nuevoTD);
 
       input = document.createElement("input");
            input.setAttribute("type", "text");
            input.setAttribute("id", idnameg);
            input.setAttribute("name", idnameg);
            input.setAttribute("value", "Titulo Grupo "+k);
            input.setAttribute("class", "claseinput");
            estilo = "text-align:center; width:"+largo+"px; color:blue;";
            input.setAttribute("style", estilo);
            input.setAttribute("onChange", "verificaInput(idnameg);");
       nuevoTD.appendChild(input);
       tbl.appendChild(nuevoTD);
       k++;
   }
   tbl.appendChild(tr);
 
   tr = document.createElement("tr");
 
   k = 1;
   g = 1;
   col_orig = cols;
   cols = grups*cols;
   for (j=0;j<cols;j++) {
       idnamec = "col"+k+"_"+g;
       nuevoTD = document.createElement("td");
            nuevoTD.setAttribute("colspan", "1");
       tbl.appendChild(nuevoTD);
 
       input = document.createElement("input");
            input.setAttribute("type", "text");
            input.setAttribute("id", idnamec);
            input.setAttribute("name", idnamec);
            input.setAttribute("value", "Titulo Columna "+k);
            input.setAttribute("class", "claseinput");
            input.setAttribute("style", "width:140px; text-align:center; color:red;");
            input.setAttribute("onChange", "verificaInput(idnamec);");
       nuevoTD.appendChild(input);
       tbl.appendChild(nuevoTD);
       k = k+1;
       if (k>col_orig) {
          g = g+1;
          k=1;
       }
   }
   tbl.appendChild(tr);
 
   tr = document.createElement("tr");
   k = 1;
   g = 1;
   for (j=0;j<cols;j++) {
       idnames = "sel"+k+"_"+g;
       nuevoTD = document.createElement("td");
            nuevoTD.setAttribute("colspan", "1");
       tbl.appendChild(nuevoTD);
 
       nuevoSelect = document.createElement("select");
            nuevoTD.setAttribute("id", idnames);
            nuevoTD.setAttribute("name", idnames);
            nuevoTD.setAttribute("onChange", "verificaInput(idnames);");
 
       opt = document.createElement("Option");
         opt.setAttribute("value", "Seleccione Filtro");
         opt.innerHTML="Seleccione Filtro";
         opt.setAttribute("selected", "");
       nuevoSelect.appendChild(opt);
 
       opt = document.createElement("Option");
         opt.setAttribute("value", "Query");
         opt.innerHTML="Query";
       nuevoSelect.appendChild(opt);
 
       opt = document.createElement("Option");
         opt.setAttribute("value", "Formula");
         opt.innerHTML="Formula";
       nuevoSelect.appendChild(opt);
 
       opt = document.createElement("Option");
         opt.setAttribute("value", "Copiar Desde Otra Columna");
         opt.innerHTML="Copiar Desde Columna";
       nuevoSelect.appendChild(opt);
 
       nuevoTD.appendChild(nuevoSelect);
       tbl.appendChild(nuevoTD);
       if (k>col_orig) {
          g = g+1;
          k=1;
       }
   }
   tbl.appendChild(tr);
 
   tr = document.createElement("tr");
 
   k = 1;
   g = 1;
   for (j=0;j<cols;j++) {
       idnamet = "txt"+k+"_"+g;
       nuevoTD = document.createElement("td");
            nuevoTD.setAttribute("colspan", "1");
       tbl.appendChild(nuevoTD);
 
       textarea = document.createElement("textarea");
            textarea.setAttribute("id", idnamet);
            textarea.setAttribute("name", idnamet);
            textarea.setAttribute("rows", "30");
            textarea.setAttribute("cols", "17");
            textarea.setAttribute("onChange", "verificaInput(idnamet);");
            textarea.setAttribute("disabled", "disabled");
       nuevoTD.appendChild(textarea);
       tbl.appendChild(nuevoTD);
       k = k+1;
       if (k>col_orig) {
          g = g+1;
          k=1;
       }
   }
   tbl.appendChild(tr);
   reporte.appendChild(tbl);
 
   reporte.style.display = "block";
}
 
function verificaInput(id) {
alert(id);
   alert(document.getElementById(id).value);
} 
   

[augusto_jaramil]

Listo.. solucionado ese pedacito...

Se tiene que cambiar
setAttribute("onChange", "verificaInput(idname);") por
setAttribute("onChange", "verificaInput(' "+idename+" ');");

Ahora viene el otro baile y es con los selectOptions: Al seleccionar alguna opcion se dispara el onChange(verificaInput( aca el id );) y si hago en la funcion verificaInput( aca el id ) alert(document.getElementById( aca el id ).value me reporta undefined... esto pasa solo con los selectOptions

ese pedacito me hace falta solucionar....

Alguna idea?

Mil Gracias de antemano

Un Cordial Saludo

[Franz1628]

Ya estaba bien , sólo faltaba añadir los <td> a los <tr> y no los <td> a <table> como esta en tu codigo.

Este es el nuevo código

Código Javascript:

String.prototype.trim = function() { return this.replace(/^s+|s+$/g, ""); }; 
 
function crearFilas() { 
 
   var reporte = document.getElementById("reporte"); 
 
   var grups = document.getElementById("grupos").value; 
   str = grups.trim(); 
   var grups = str; 
 
   var cols = document.getElementById("cols").value; 
   str = cols.trim(); 
   var cols = str; 
 
   tbl = document.createElement("table"); 
   tr = document.createElement("tr"); 
 
   i = 0; 
   k = 1; 
   largo = ((140*cols)+(3*cols)); 
   for (i=0;i<grups;i++) { 
       idnameg="grp"+k+"_0"; 
       nuevoTD = document.createElement("td"); 
            nuevoTD.setAttribute("colspan", cols); 
       tbl.appendChild(nuevoTD); 
 
       input = document.createElement("input"); 
            input.setAttribute("type", "text"); 
            input.setAttribute("id", idnameg); 
            input.setAttribute("name", idnameg); 
            input.setAttribute("value", "Titulo Grupo "+k); 
            input.setAttribute("class", "claseinput"); 
            estilo = "text-align:center; width:"+largo+"px; color:blue;"; 
            input.setAttribute("style", estilo); 
            input.setAttribute("onChange", "verificaInput(idnameg);"); 
       nuevoTD.appendChild(input); 
       tr.appendChild(nuevoTD); 
       k++; 
   } 
   
   tbl.appendChild(tr); 
 
   tr = document.createElement("tr"); 
 
   k = 1; 
   g = 1; 
   col_orig = cols; 
   cols = grups*cols; 
   for (j=0;j<cols;j++) { 
       idnamec = "col"+k+"_"+g; 
       nuevoTD = document.createElement("td"); 
            nuevoTD.setAttribute("colspan", "1"); 
       tbl.appendChild(nuevoTD); 
 
       input = document.createElement("input"); 
            input.setAttribute("type", "text"); 
            input.setAttribute("id", idnamec); 
            input.setAttribute("name", idnamec); 
            input.setAttribute("value", "Titulo Columna "+k); 
            input.setAttribute("class", "claseinput"); 
            input.setAttribute("style", "width:140px; text-align:center; color:red;"); 
            input.setAttribute("onChange", "verificaInput(idnamec);"); 
       nuevoTD.appendChild(input); 
       tr.appendChild(nuevoTD); 
       k = k+1; 
       if (k>col_orig) { 
          g = g+1; 
          k=1; 
       } 
   } 
   tbl.appendChild(tr); 
 
   tr = document.createElement("tr"); 
   k = 1; 
   g = 1; 
   for (j=0;j<cols;j++) { 
       idnames = "sel"+k+"_"+g; 
       nuevoTD = document.createElement("td"); 
            nuevoTD.setAttribute("colspan", "1"); 
       tr.appendChild(nuevoTD); 
 
       nuevoSelect = document.createElement("select"); 
            nuevoTD.setAttribute("id", idnames); 
            nuevoTD.setAttribute("name", idnames); 
            nuevoTD.setAttribute("onChange", "verificaInput(idnames);"); 
 
       opt = document.createElement("Option"); 
         opt.setAttribute("value", "Seleccione Filtro"); 
         opt.innerHTML="Seleccione Filtro"; 
         opt.setAttribute("selected", ""); 
       nuevoSelect.appendChild(opt); 
 
       opt = document.createElement("Option"); 
         opt.setAttribute("value", "Query"); 
         opt.innerHTML="Query"; 
       nuevoSelect.appendChild(opt); 
 
       opt = document.createElement("Option"); 
         opt.setAttribute("value", "Formula"); 
         opt.innerHTML="Formula"; 
       nuevoSelect.appendChild(opt); 
 
       opt = document.createElement("Option"); 
         opt.setAttribute("value", "Copiar Desde Otra Columna"); 
         opt.innerHTML="Copiar Desde Columna"; 
       nuevoSelect.appendChild(opt); 
 
       nuevoTD.appendChild(nuevoSelect); 
       tr.appendChild(nuevoTD); 
       if (k>col_orig) { 
          g = g+1; 
          k=1; 
       } 
   } 
   tbl.appendChild(tr); 
 
   tr = document.createElement("tr"); 
 
   k = 1; 
   g = 1; 
   for (j=0;j<cols;j++) { 
       idnamet = "txt"+k+"_"+g; 
       nuevoTD = document.createElement("td"); 
            nuevoTD.setAttribute("colspan", "1"); 
       tr.appendChild(nuevoTD); 
 
       textarea = document.createElement("textarea"); 
            textarea.setAttribute("id", idnamet); 
            textarea.setAttribute("name", idnamet); 
            textarea.setAttribute("rows", "30"); 
            textarea.setAttribute("cols", "17"); 
            textarea.setAttribute("onChange", "verificaInput(idnamet);"); 
            textarea.setAttribute("disabled", "disabled"); 
       nuevoTD.appendChild(textarea); 
       tr.appendChild(nuevoTD); 
       k = k+1; 
       if (k>col_orig) { 
          g = g+1; 
          k=1; 
       } 
   } 
   tbl.appendChild(tr); 
   reporte.appendChild(tbl); 
 
   reporte.style.display = "block"; 
} 
 
function verificaInput(id) { 
alert(id); 
   alert(document.getElementById(id).value); 
}
 

[Franz1628]

se supone que el atributo onchange debes ponerle a la etiqueta <select>

[augusto_jaramil]

Que tal Don Franz1628,

Hay que corregir otra vaina en el código que me enviaste: en la declaración del nuevoSelect, lineas 83 a 85.... hay que cambiar los nuevoTD por nuevoSelect... fijate en el código que envié anterior al tuyo, así se me solucionó la vaina

Ahora lo que debo hacer es gestionar el formulario y enviar los datos al servidor mediante ajax para almacenarlos en la base de datos... Ya será mañana.

Te agradezco infinito...

Mil y mil, gracias...