Generar tabla mediante formulario

Jejasa · #1 (**permalink**) 22/09/2008, 14:02

Hola.

Llevo poco tiempo con esto de Javascript y quiero hacer lo siguiente:

la idea es que mediante un formulario en el que se pide Numero de Columnas y Numero De Elementos se genere una tabla.

Obtener algo como la siguiente Imagen:

Espero me entiendan y me puedan ayudar

saludos

the_web_saint · #2 (**permalink**) 22/09/2008, 14:12

Bueno al darle aceptar, envias esto a una funcion javascript en la que con estos valores manejas un ciclo, en el cual generas una cadena de texto html y al final la insertas a un contenedor, por ejemplo un div, con innerHTML.

Saludos

Jejasa · #3 (**permalink**) 22/09/2008, 14:21

Cita:

Iniciado por the_web_saint

Bueno al darle aceptar, envias esto a una funcion javascript en la que con estos valores manejas un ciclo, en el cual generas una cadena de texto html y al final la insertas a un contenedor, por ejemplo un div, con innerHTML.

Saludos

Hola, podrías ayudarme con esto, se bien como generar la tabla conociendo el numero de columnas y el numero de filas, pero no comprendo bien como hacer para que se genere la tabla, sin conocer las filas sino los elementos

the_web_saint · #4 (**permalink**) 22/09/2008, 14:30

bueno para eso solo necesitas dividir el numero de elementos entre las columnas.
en tu caso 10/4=2.5 y redondeas al mayor osea a 3 y esa es el numero de filas

Saludos

Jejasa · #5 (**permalink**) 22/09/2008, 14:55

Cita:

Iniciado por the_web_saint

bueno para eso solo necesitas dividir el numero de elementos entre las columnas.
en tu caso 10/4=2.5 y redondeas al mayor osea a 3 y esa es el numero de filas

Saludos

gracias, voy a intentar hacerlo y cualquier problema estaré otra vez por aquí
Saludos

anlhp · #6 (**permalink**) 22/09/2008, 17:48

tio, lo que quieres hacer no es nada del otro mundo por eso me da roña que en vez de darte una solucion te manden a investigar

joe, si posteas aqui es porque debes estar cansao de buscar o en el peor de los casos, te gusta el trabajo facil

, no obstante en cualquier caso me gusta ayudar XD asi que aqui te pongo un ejemplo funcional, ya adaptarlo y preguntar si no entiendes algo es cosa tuya, yo por ahora me limito a esto jeje:

Código HTML:

<head> 
<title>DOM Example</title> 
<script type="text/javascript"> 
 
   function createTable(iRows, iCols){
      var oTable = document.getElementsByTagName('table')[0];
      var k = 1;
      for(var i = 0; i < iRows; i++){
         
         var oTRow = document.createElement('tr');
                  
         for(var j = 0; j < iCols; j++){
          
          var oTCol = document.createElement('td');
          var oText = document.createTextNode(k);
                    
          oTCol.appendChild(oText);                
          oTRow.appendChild(oTCol);
          
          k++; 
         }        
         
         oTable.appendChild(oTRow);
      }
   }
   
   </script> 
</head> 
 
<body> 
     
   <p>Hello World!</p> 
   <p>Isn't this exciting?</p> 
   <p>You're learning to use DOM!</p> 
   Filas <input type="text" name="rows" /> 
   <br /> 
   Columnas <input type="text" name="cols" /> 
   <br /> 
   <a href="#" onclick="var iRows = document.getElementsByName('rows')[0].value;
                        var iCols = document.getElementsByName('cols')[0].value;
                        createTable(iRows, iCols);">aceptar</a> 
   <table style="border: 1px solid grey"> 
   </table> 
   
</body>

ojo o_O, las filas ni columnas tienen especificados bordes asi que si los quieres, ponselos jejeje ya sea por css o javascript (si no lo sabes simplemente pregunta)
y ya que eres nuevo en esta historia y antes de que empieces a leerte libros y libros de javascript que no te llevaran mas alla de saber como declarar una variable te aconsejo, y sientete especial ya que es al primero que se lo digo XD, el libro de wrox Professional JavaScript de Nicholas Zakas, como todo libre tiene sus erratas, pero es sublime creeme, consiguelo y veras (no te lo paso porque no lo tengo :( )

enjoy ;)

anlhp · #7 (**permalink**) 22/09/2008, 17:51

por cierto, tambien te incito a usar la API DOM, no uses elementos propietarios y falta de orientacion a objetos (innerHTML o outerHTML o todo eso de IE, aunque bueno, que lo conozcas tampoco esta mal ya que en su momento es util)

:P

anlhp · #8 (**permalink**) 23/09/2008, 03:44

señores, señooores, lo siento muxo, dios, me he equivocao de hilo, ya sabia yo que veia muy pocas respuestas pero pensaba que era el navegador que todavia estaba cargando, perdon a todos, bueno mejor decir a los dos jejee

por lo de que no daban buenas respuestas, es que en un tema ahi habia un xico que lo tenian loco, que si leete esto o lo otro y al final no le decian nada en concreto jejeje
pero bueno jejasa, igual creo que mi respuesta vale, solo tenes que combinarlo con la respuesta de web_saint y ya resuelves tu problema

de nuevo, lo siento tios