jueves, 19 de diciembre de 2013

Javascript - Tablas Automáticas

Creando Tablas  con Javascipt




Este es un ejemplo de crear tablas de manera automatica.
Usaremos una function y la herramienta for.
<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.

<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>

No hay comentarios:

Publicar un comentario