Tema: ¿Cómo hacer tabla grande?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 29/04/2012, 14:05
Musiker
Invitado
  
Mensajes: n/a
Puntos:
¿Cómo hacer tabla grande?
Hola a todos.

Quería saber cómo podría hacer para que en el archivo html mostrara una tabla completa de "n" filas y "n" columnas, no sólo lo que aparece.
He intentado hacer 2 bucles "for" para que uno hiciera las filas y otro las columnas, pero no muestra lo que deseo. Si es una tabla pequeña no hay problema en escribir el código de la tabla, pero si tiene 50, 100 o más líneas no creo que se tenga que hacer manualmente.

Muchas gracias por adelantado.

Código PHP: 
Ver original
  1. <?php
  2. header('Content-Type: text/html; charset=ISO-8859-1');
  3.  
  4. $conexion = mysql_connect("localhost", "root", "");
  5. mysql_select_db("bdconsulta", $conexion);
  6.  
  7. $registros = mysql_query("select * from tabla", $conexion);
  8.  
  9. while ($fila = mysql_fetch_array($registros)){
  10.     echo $fila["campo1"];
  11.     echo "<p>";
  12.     if ($fila != 24) echo 'esto es una prueba';
  13.     echo "<p>";
  14.     }
  15. ?>

Código CSS: 
Ver original
  1. #menu {
  2.   font-family: Arial;
  3.   margin:5px;
  4. }
  5.  
  6. #menu p {
  7.   margin:0px;
  8.   padding:0px;
  9. }
  10.  
  11. #menu a {
  12.   display: block;
  13.   padding: 10px;
  14.   width: 1px;
  15.   background-color: #f7f8e8;
  16.   border-bottom: 1px solid #eee;
  17.   text-align:center;
  18. }
  19.  
  20. #menu a:link, #menu a:visited {
  21.   color: #f00;
  22.   text-decoration: none;
  23. }
  24.  
  25. #menu a:hover {
  26.   background-color: red;
  27.   color: #fff;
  28. }
  29.  
  30. #detalles {
  31.   background-color:#ffc;
  32.   text-align:left;
  33.   font-family:verdana;
  34.   border-width:0;
  35.   padding:5px;
  36.   border: 1px dotted #fa0;
  37.   margin:5px;
  38. }

Código Javascript: 
Ver original
  1. addEvent(window,'load',inicializarEventos,false);
  2.  
  3. function inicializarEventos()
  4. {
  5.   var ob;
  6.   for(f=1;f<=12;f++)
  7.   {
  8.     ob=document.getElementById('enlace'+f);
  9.     addEvent(ob,'click',presionEnlace,false);           
  10.   }
  11.  
  12. }
  13.  
  14. function presionEnlace(e)
  15. {
  16.   if (window.event)
  17.   {
  18.     window.event.returnValue=false;
  19.     var url=window.event.srcElement.getAttribute('href');
  20.     cargarHoroscopo(url);     
  21.   }
  22.   else
  23.     if (e)
  24.     {
  25.       e.preventDefault();
  26.       var url=e.target.getAttribute('href');
  27.       cargarHoroscopo(url);     
  28.     }
  29. }
  30.  
  31.  
  32. var conexion1;
  33. function cargarHoroscopo(url) 
  34. {
  35.   if(url=='')
  36.   {
  37.     return;
  38.   }
  39.   conexion1=crearXMLHttpRequest();
  40.   conexion1.onreadystatechange = procesarEventos;
  41.   conexion1.open("GET", url, true);
  42.   conexion1.send(null);
  43. }
  44.  
  45. function procesarEventos()
  46. {
  47.   var detalles = document.getElementById("detalles");
  48.   if(conexion1.readyState == 4)
  49.   {
  50.     detalles.innerHTML = conexion1.responseText;
  51.   } 
  52.   else 
  53.   {
  54.     detalles.innerHTML = 'Cargando...';
  55.   }
  56. }
  57.  
  58. //***************************************
  59. //Funciones comunes a todos los problemas
  60. //***************************************
  61. function addEvent(elemento,nomevento,funcion,captura)
  62. {
  63.   if (elemento.attachEvent)
  64.   {
  65.     elemento.attachEvent('on'+nomevento,funcion);
  66.     return true;
  67.   }
  68.   else  
  69.     if (elemento.addEventListener)
  70.     {
  71.       elemento.addEventListener(nomevento,funcion,captura);
  72.       return true;
  73.     }
  74.     else
  75.       return false;
  76. }
  77.  
  78. function crearXMLHttpRequest() 
  79. {
  80.   var xmlHttp=null;
  81.   if (window.ActiveXObject) 
  82.     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  83.   else 
  84.     if (window.XMLHttpRequest) 
  85.       xmlHttp = new XMLHttpRequest();
  86.   return xmlHttp;
  87. }

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <title>Problema</title>
  4. <script src="funciones.js" language="JavaScript"></script>
  5. <link rel="StyleSheet" href="estilos.css" type="text/css">
  6. </head>
  7. <body>
  8. <h1>Titulo</h1>
  9. <div id="menu">
  10.  
  11.  
  12. <p><a id="enlace1" href="pagina1.php?cod=1"></a></p>
  13. <p><a id="enlace2" href="pagina1.php?cod=2"></a></p>
  14. <p><a id="enlace3" href="pagina1.php?cod=3"></a></p>
  15. <p><a id="enlace4" href="pagina1.php?cod=4"></a></p>
  16. <p><a id="enlace5" href="pagina1.php?cod=5"></a></p>
  17. <p><a id="enlace6" href="pagina1.php?cod=6"></a></p>
  18. <p><a id="enlace7" href="pagina1.php?cod=7"></a></p>
  19. <p><a id="enlace8" href="pagina1.php?cod=8"></a></p>
  20. <p><a id="enlace9" href="pagina1.php?cod=9"></a></p>
  21. <p><a id="enlace10" href="pagina1.php?cod=10"></a></p>
  22. <p><a id="enlace11" href="pagina1.php?cod=11"></a></p>
  23. <p><a id="enlace12" href="pagina1.php?cod=12"></a></p>
  24.  
  25. </div>
  26. <div id="detalles">Seleccione la posición que desee.</div>
  27.  
  28.  
  29. </body>
  30.  
  31. </html>