LABORATORIO DE PROGRAMACIÓN WEB

Generando tablas de manera interactiva.

Hola, soy Carlos Triana, el siguiente es un programa que hice en Javascript para

generar una tabla de manera interactiva (es el objetivo de Javascript), el programa primero te pide ingresar el número de filas que quieres que contenga tu tabla, luego te pide el número de columnas, puse a cada celda un color distinto de otro, como simulando un tablero de ajedrez, con los colores rojo y negro.

Después de hacer esas preguntas, genera la tabla con las características antes mencionadas, en una página Html.

A continuación les dejo el código de mi programa y algunas imágenes de su ejecución:

Parte 1 del código. (Hacer click en la imagen para verla más grande)

Explicación de la primera parte del código.

Para generar la tabla interactiva, puse 2 entradas por teclado, preguntando por el número de filas y el número de columnas que tendría la tabla, y asigné los valores ingresados a las variables M y N respectivamente.
Primero escribí la etiqueta inicial para crear una table, además de sus respectivas características
(border="0", para que no tenga borde, cellspacing = "0" para que el espacio entre las celdas lo determine el texto que voy a introducir y cellpading="20", para que aparte del espacio del texto, se pase un espacio extra entre cada celda).

Dividí el código en 2 partes, la primera parte, es para cuando el número de columnas es un número par.
Y el segundo, es para cuando el número de columnas es impar.

Cuando el número de columnas es par (if N%2==0) imprimo en la página una etiqueta para la creación de fila, esto es dentro de un for que imprimira M(número de filas) veces de filas.
Dentro de ese mismo for hay otro ciclo for anidado que es el que controla las columnas, y va imprimiendo las celdas de 2 en 2, por eso pongo que i debe ser menor a N/2, si no lo pusier entre 2, se imprimiria el doble de columnas.

Parte 2 del código (Hacer click en la imagen para verla más grande).

Explicación de la segunda parte del código.
Cuando el número de columnas es impar, ya no imprimo las celdas de 2 en 2, porque de esta manera siempre quedaría la tabla con el número de columnas N+1.
Por eso ahora imprimo las celdas de 1 en 1, y tambien ya no divido entre 2 el número de columnas, por esa misma razon. Si lo siguiera dividiendo entre 2 ahora me saldría la tabla con la mitad de columnas.
Al final cierro la etiqueta de creación de fila y la de creación de tabla , después de cerrar la etiqueta table, viene un cierre de center eso es porque yo quise centrar la tabla que fue creada.

Antes de la tabla también puse un texto que dice :"Haciendo tablas de manera interactiva".

Si alguien quiere probar el programa, lo más seguro es que su navegador les va a poner una leyenda arriba de la página que avisa sobre la protección de Internet Explorer (en mi caso), para impedir que la página ejecute scripts.

Para poder ejecutar el script que va a generar la tabla, solo hagan click sobre la leyenda antes mencionada y después eligan la opción "Permitir contenido bloqueado..."

Estas son las imágenes del script en ejecución y de la tabla generada:

Ingreso del número de filas.

















Ingreso del número de columnas.















Tabla generada con las características asignadas.






























Esto es todo lo que hace mi código en Javascript...espero se haya entendido mi explicación y les haya gustado mi trabajo.

Cualquier duda o corrección, pueden dejarla en los comentarios.