Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Javascript - Tablas Automáticas
#1
[Imagen: p7ZsV6j.jpg]

Este es un ejemplo de crear tablas de manera automatica.
Usaremos una function y la herramienta for.

Código:
<table class="table">
    <script type="text/javascript">
    
    var f=prompt("Ingrese la cantidad de filas");
    var c=prompt("Ingrese la cantidad de columnas");
    
      function tabla(f,c)
      {
       for(i=1;i<=f;i++)
       {
           document.write("<tr>");

           for(j=1;j<=c;j++)
           {
           document.write("<td></td>");
           }
          
           document.write("</tr>");

       }
        
      }
      
      tabla(f,c);
    </script>
</table>

Lo que se hace en este codigo, es hacer uso de una function que contendra los valores de las filas y columnas, se usaran dos ciclos de for, uno para las filas y otro para las columnas.
Lo que se hace es usar un for dentro de otro for, ambos con valores diferentes que saldran de los valores de la funcion, se usan variables i, j para que no se tomen los mismos valores en el ciclo de los for, y esos valores saldran respectivamente de la funcion.

Para dar un aspecto agradable usamos un css adicional.

Código:
<style type="text/css">
.table {color:#666;margin:0 auto;border:1px solid #ddd; border-width:1px;}
.table tr {background:#F4F4F4}
.table td {width:30px;height:50px;cursor:pointer;padding:10px;border:1px solid #ddd; border-width:1px; vertical-align:middle; text-align:center}
.table td:hover  {background:#EEE}
</style>

Fuente: Serverlat
#2
Estas tablas parecen similares a las de jquery y son bien utiles aunque el css lo mejoraria lo veo bastante basico, buen aporte.
WWW
#3
Como dice @Vicen con un poco mas de estilo se veria genial!
Cosas por hacer en skylium:
Ser feo []
Tener 50 mensajes [X]
Tener 50 post [X]
Ser moderador [X]
Tener reputación [Ver]
Tener un post marcado "importante"[]
WWW
#4
El ejemplo de cómo funciona está genial. Creo que a partir de él debe ser el mismo usuario quien manipule el código para poder obtener el estilo que desee o las filas y columnas y demás.

Se puede jugar bastante con el CSS y llegar a obtener lo que uno quiera. Pero es una herramienta, más que nada, para simplificar la creación de celdas jaja.

Simple pero podría ser útil Lengua
[Imagen: b6712e92-e04e-4c2b-adc7-158d2dd46f1c.png]
Administrador principal de Road to Shinobi
Tu foro ROL de Naruto - ¡Entra ya en Road to Shinobi!
WWW
#5
Yo haría una función y la invocaría en el html, se podría modificar para que reciba el número de columnas y el número de filas
WWW
#6
Sencillo y practico. Lo llamas en un div o span y tenes una tabla asi de facil.

El tutorial bien explicado y la parte del estilo se la da uno mismo. No es necesario que le den un estilo si no es lo que esta mostrando Guiño

Un saludo!
Próximamente sitio web de descargas, sistemas operativos Samsung, archivos combinados oficiales Samsung (reparación de imei y desbloqueo FRP), programas útiles para la reparación de Software.
Servidor FTP premium, mínima cuota mensual (trimestral, semestral, anual)
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 127 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Linux Foundation respalda JavaScript Kiichi 3 138 03-11-2016, 03:43 AM
Último mensaje: habacuc78
  [Aporte] Curso básico de Javascript habacuc78 22 801 05-07-2016, 03:53 PM
Último mensaje: escuelasegura
  Trucos y efectos de Javascript para tu página web CarlosAlberto 0 377 05-01-2016, 03:51 PM
Último mensaje: CarlosAlberto
Sonrisa [Tutorial] Cómo utilizar Javascript para actualizar un Título R0bert0 0 297 05-12-2015, 10:07 PM
Último mensaje: R0bert0
Bombilla [Tutorial] Cómo utilizar Javascript para reproducir un archivo R0bert0 0 237 05-12-2015, 10:02 PM
Último mensaje: R0bert0
  [Tutorial] Calculadora sencilla en JavaScript luis.ml 3 384 21-09-2015, 12:03 PM
Último mensaje: riblier
  [Duda] ¿Cómo tener tablas personalizadas en PHPMyAdmin? Kevin9908 3 169 01-07-2015, 05:06 PM
Último mensaje: Juliens
  Ayuda con Contador en JavaScript alemagno 2 245 25-06-2015, 06:29 PM
Último mensaje: alemagno
  Caracteres especiales en javascript MikaCookies 4 461 09-03-2015, 01:41 AM
Último mensaje: MikaCookies



Usuarios navegando en este tema: 1 invitado(s)