Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Crear tabla con cierta cantidad de filas y celdas con javascript

 Estas en el tema de Crear tabla con cierta cantidad de filas y celdas con javascript en el foro de Javascript en Foros del Web. buenas tardes tengo una función para crear informes que la estoy haciendo mediante javascript, el tema esta en que no me esta funcionando como yo ...
  #1 (permalink)  
Antiguo 19/05/2015, 11:58
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 12 años, 3 meses
Puntos: 3
Pregunta Crear tabla con cierta cantidad de filas y celdas con javascript
buenas tardes tengo una función para crear informes que la estoy haciendo mediante javascript, el tema esta en que no me esta funcionando como yo quiero q funcione. La función consiste en pedirle una cantidad de alumnos al usuario, y que esta haga una tabla dinámicamente con la cantidad de alumnos que le pido al usuario, por cada alumno una fila diferente... y 5 celdas por cada fila... dejo mi código a ver si alguien me puede dar una ayudita????????


Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Informe Notas</title>
  6.  
  7. <script language="javascript" type="text/javascript" src="informenotas.js"></script>
  8.  
  9. </head>
  10. <body>
  11.  
  12. <center>
  13.  
  14. <div id="creacion">
  15. <form enctype="multipart/form-data"  name="formplantilla"  method="post">
  16. <table id="tblcrear" border="1" width="800" align="center">
  17. <tr>
  18. <td>Institución</td>
  19. <td><input type="text" id="institucion" name="inst" /></td>
  20. <td></td>
  21. </tr>
  22. <tr>
  23. <td>Nivel de curso</td>
  24. <td><input type="text" id="nivelcurso" name="nivcurso"/></td>
  25. <td></td>
  26. </tr>
  27. <tr>
  28. <td>Cantidad de alumnos</td>
  29. <td><input type="text" id="cantalumnos" name="cntalumnos" /></td>
  30. </tr>
  31. <tr>
  32. <td></td>
  33. <td><input type="button" id="crearplantilla"  onclick="crearinforme();" value="Crear Plantilla" /></td>
  34. </tr>
  35. </table>
  36. </form>
  37. </div>
  38.  
  39. <div id="informe" style="display:none;">
  40. <form enctype="multipart/form-data" action="crearexcel.php" target="new" id="formcrearexcel" name="formcrearexcel" method="post">
  41.  
  42. <table id="tblcabecerainfo" border="1" style="display:none;" border="0" width="800" align="center">
  43. </table>
  44. <table id="tbldatosinfo" style="display:none;" border="0" width="800" align="center">
  45. </table>
  46.  
  47. </form>
  48.  
  49. </div>
  50.  
  51. </center>
  52.  
  53. </body>
  54. </html>


Código Javascript: 
Ver original
  1. // JavaScript Document
  2. function crearinforme()
  3. {
  4.     
  5.     //valido institucion
  6.     if (document.formplantilla.institucion.value.length==0){
  7.        alert("Tiene que escribir el nombre de la institución")
  8.        document.fvalida.institucion.focus()
  9.        return 0;
  10.     }
  11.     
  12.     //valido el nivel del curso
  13.     if (document.formplantilla.nivelcurso.value.length==0){
  14.        alert("Tiene que escribir el nivel del curso")
  15.        document.fvalida.nivelcurso.focus()
  16.        return 0;
  17.     }
  18.     
  19.     //valido la cantidad de alumnos
  20.     if (document.formplantilla.cantalumnos.value.length==0){
  21.        alert("Tiene que escribir la cantidad de alumnos")
  22.        document.fvalida.cantalumnos.focus()
  23.        return 0;
  24.     }
  25.     
  26.     
  27.     
  28.     document.getElementById('creacion').style.display="none";
  29.     document.getElementById('informe').style.display="block";
  30.             
  31.     
  32.     var tablecabecera = document.getElementById('tblcabecerainfo');
  33.     tablecabecera.style.display="block"
  34.     
  35.     var rowinstitucion = tablecabecera.insertRow(0);
  36.     var cell= rowinstitucion.insertCell(0);
  37.     var institucion=document.getElementById('institucion').value
  38.     
  39.       
  40.     cell.innerHTML = "Institución: "+ "<b>"+institucion+"</b>"
  41.     cell.style.width="200px"
  42.     
  43.     
  44.     
  45.     var nivelcurso=document.getElementById('nivelcurso').value
  46.     cell1= rowinstitucion.insertCell(1);
  47.     cell1.innerHTML="Nivel de curso: "+"<b>"+ nivelcurso+"</b>"
  48.     cell1.style.width="250px"
  49.     
  50.     
  51.     
  52.     var rowdatos=tablecabecera.insertRow(1);
  53.     
  54.     
  55.     celldatos2=rowdatos.insertCell(0);
  56.     celldatos2.innerHTML="Nombre"
  57.     
  58.     celldatos3=rowdatos.insertCell(1);
  59.     celldatos3.innerHTML="Apellido"
  60.         
  61.     celldatos4=rowdatos.insertCell(2);
  62.     celldatos4.innerHTML="Nota del parcial"
  63.     celldatos4.style.width="200px"
  64.     
  65.     celldatos5=rowdatos.insertCell(3);
  66.     celldatos5.innerHTML="Apreciación docente"
  67.     celldatos5.style.width="200px"
  68.     
  69.     celldatos6=rowdatos.insertCell(4);
  70.     celldatos6.innerHTML="Otras consideraciones"
  71.     celldatos6.style.width="200px"
  72.     
  73.     
  74.     var insertdatosinfo=document.getElementById('tbldatosinfo');
  75.     
  76.     insertdatosinfo.style.display="block";
  77.     
  78.     var cantalumnos=document.getElementById('cantalumnos').value;
  79.     var i=0;
  80.     
  81.     
  82.     
  83.     
  84.     cantcolumnas= cantalumnos * 5
  85.     
  86.     
  87.     for(i=0;i<cantalumnos;i++)
  88.     var rowinsertdatos=insertdatosinfo.insertRow(i);
  89.         
  90.     for (i = 0; i < cantcolumnas ; i++)
  91.     { 
  92.         
  93.      cells= rowinsertdatos.insertCell(i);
  94.      cells.innerHTML="<input type='text'>";
  95.     
  96.         }
  97.     
  98.     
  99.  
  100.     
  101. }
Última edición por maximendez88; 19/05/2015 a las 13:50
  #2 (permalink)  
Antiguo 20/05/2015, 12:06
Avatar de maximendez88  
Fecha de Ingreso: septiembre-2012
Ubicación: Montevideo
Mensajes: 131
Antigüedad: 12 años, 3 meses
Puntos: 3
De acuerdo Respuesta: Crear tabla con cierta cantidad de filas y celdas con javascript
por mas que nadie me quizo dar una mano llegue a la solucion... la dejo abajo...



Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Informe Notas</title>
  6.  
  7.  
  8. <script language="javascript" type="text/javascript" src="informenotas.js"></script>
  9.  
  10.  
  11. </head>
  12. <body>
  13.  
  14. <center>
  15.  
  16. <div id="creacion">
  17. <form enctype="multipart/form-data"  name="formplantilla"  method="post">
  18. <table id="tblcrear" border="1" width="800" align="center">
  19. <tr>
  20. <td>Institución</td>
  21. <td><input type="text" id="institucion" name="inst" /></td>
  22. <td></td>
  23. </tr>
  24. <tr>
  25. <td>Nivel de curso</td>
  26. <td><input type="text" id="nivelcurso" name="nivcurso"/></td>
  27. <td></td>
  28. </tr>
  29. <tr>
  30. <td>Cantidad de alumnos</td>
  31. <td><input type="text" id="cantalumnos" name="cntalumnos" /></td>
  32. </tr>
  33. <tr>
  34. <td></td>
  35. <td><input type="button" id="crearplantilla"  onclick="crearinforme();" value="Crear Plantilla" /></td>
  36. </tr>
  37. </table>
  38. </form>
  39. </div>
  40.  
  41.  
  42.  
  43.  
  44. <div id="informe" style="display:none;">
  45.  
  46.  
  47. <form enctype="multipart/form-data" action="crearexcel.php" target="new" id="formcrearexcel" name="formcrearexcel" method="post">
  48.  
  49. <table id="tblcabecerainfo" border="1" style="display:none;" border="0" width="830" align="center">
  50. </table>
  51.  
  52.  
  53. <table id="tbldatosinfo" style="display:none;" border="0" width="830" align="center">
  54. </table>
  55.  
  56.  
  57.  
  58.  
  59. </form>
  60.  
  61. </div>
  62.  
  63.  
  64.  
  65.  
  66.  
  67.  
  68. </center>
  69.  
  70. </body>
  71. </html>




Código Javascript: 
Ver original
  1. // JavaScript Document
  2. function crearinforme()
  3. {
  4.     
  5.     //valido institucion
  6.     if (document.formplantilla.institucion.value.length==0){
  7.        alert("Tiene que escribir el nombre de la institución")
  8.        document.fvalida.institucion.focus()
  9.        return 0;
  10.     }
  11.     
  12.     //valido el nivel del curso
  13.     if (document.formplantilla.nivelcurso.value.length==0){
  14.        alert("Tiene que escribir el nivel del curso")
  15.        document.fvalida.nivelcurso.focus()
  16.        return 0;
  17.     }
  18.     
  19.     //valido la cantidad de alumnos
  20.     if (document.formplantilla.cantalumnos.value.length==0){
  21.        alert("Tiene que escribir la cantidad de alumnos")
  22.        document.fvalida.cantalumnos.focus()
  23.        return 0;
  24.     }
  25.     
  26.     
  27.     
  28.     document.getElementById('creacion').style.display="none";
  29.     document.getElementById('informe').style.display="block";
  30.             
  31.     
  32.     var tablecabecera = document.getElementById('tblcabecerainfo');
  33.     tablecabecera.style.display="block"
  34.     
  35.     var rowinstitucion = tablecabecera.insertRow(0);
  36.     var cell= rowinstitucion.insertCell(0);
  37.     var institucion=document.getElementById('institucion').value
  38.     
  39.       
  40.     cell.innerHTML = "Institución: "+ "<b>"+institucion+"</b>"
  41.     cell.style.width="200px"
  42.     
  43.     
  44.     
  45.     var nivelcurso=document.getElementById('nivelcurso').value
  46.     cell1= rowinstitucion.insertCell(1);
  47.     cell1.innerHTML="Nivel de curso: "+"<b>"+ nivelcurso+"</b>"
  48.     cell1.style.width="250px"
  49.     
  50.     
  51.     cell2= rowinstitucion.insertCell(2);
  52.     
  53.     cell3= rowinstitucion.insertCell(3);
  54.     
  55.     cell4= rowinstitucion.insertCell(4);
  56.  
  57.     
  58.     
  59.     
  60.     
  61.     
  62.     var rowdatos=tablecabecera.insertRow(1);
  63.     
  64.     
  65.     celldatos2=rowdatos.insertCell(0);
  66.     celldatos2.innerHTML="Nombre"
  67.     celldatos2.style.width="214px"
  68.     
  69.     celldatos3=rowdatos.insertCell(1);
  70.     celldatos3.innerHTML="Apellido"
  71.     celldatos3.style.width="200px"
  72.         
  73.     celldatos4=rowdatos.insertCell(2);
  74.     celldatos4.innerHTML="Nota del parcial"
  75.     celldatos4.style.width="200px"
  76.     
  77.     celldatos5=rowdatos.insertCell(3);
  78.     celldatos5.innerHTML="Apreciación docente"
  79.     celldatos5.style.width="200px"
  80.     
  81.     celldatos6=rowdatos.insertCell(4);
  82.     celldatos6.innerHTML="Otras consideraciones"
  83.     celldatos6.style.width="200px"
  84.     
  85.     
  86.     var insertdatosinfo=document.getElementById('tbldatosinfo');
  87.     insertdatosinfo.border="1"
  88.     
  89.     insertdatosinfo.style.display="block";
  90.     
  91.     var cantalumnos=document.getElementById('cantalumnos').value;
  92.     
  93.     cantcolumnas=0;
  94.     
  95.     
  96.                 
  97.     
  98.     for(i=0;i<cantalumnos;i++)
  99.     {
  100.     
  101.     cantcolumnas=0;
  102.     
  103.     var rowinsertdatos=insertdatosinfo.insertRow(i);
  104.     
  105.     while(cantcolumnas<5)
  106.     {
  107.         
  108.         cellalgo= rowinsertdatos.insertCell(cantcolumnas)
  109.         cellalgo.innerHTML="<input type='text'>"
  110.         cellalgo.style.width="200px"
  111.         cantcolumnas++;
  112.         
  113.         
  114.         
  115.     }
  116.     
  117.     
  118.     
  119.     }
  120.     
  121.     
  122.     
  123.     
  124.     
  125.     
  126.     
  127.     
  128.     
  129.     
  130.     
  131.     
  132.     
  133.     
  134.     
  135.     
  136.     
  137.     
  138.     
  139. }

Etiquetas: cantidad, celdas, filas, funcion, html, input, js, php, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 06:01.