¿Cómo hacer tabla grande?

#1 (**permalink**) 29/04/2012, 14:05

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<?php
header('Content-Type: text/html; charset=ISO-8859-1');
 
$conexion = mysql_connect("localhost", "root", "");
mysql_select_db("bdconsulta", $conexion);
 
$registros = mysql_query("select * from tabla", $conexion);
 
while ($fila = mysql_fetch_array($registros)){
    echo $fila["campo1"];
    echo "<p>";
    if ($fila != 24) echo 'esto es una prueba';
    echo "<p>";
    }
?>

Código CSS:

Ver original#menu {
  font-family: Arial;
  margin:5px;
}
 
#menu p {
  margin:0px;
  padding:0px;
}
 
#menu a {
  display: block;
  padding: 10px;
  width: 1px;
  background-color: #f7f8e8;
  border-bottom: 1px solid #eee;
  text-align:center;
}
 
#menu a:link, #menu a:visited {
  color: #f00;
  text-decoration: none;
}
 
#menu a:hover {
  background-color: red;
  color: #fff;
}
 
#detalles {
  background-color:#ffc;
  text-align:left;
  font-family:verdana;
  border-width:0;
  padding:5px;
  border: 1px dotted #fa0;
  margin:5px;
}

Código Javascript:

Ver originaladdEvent(window,'load',inicializarEventos,false);
 
function inicializarEventos()
{
  var ob;
  for(f=1;f<=12;f++)
  {
    ob=document.getElementById('enlace'+f);
    addEvent(ob,'click',presionEnlace,false);           
  }
 
}
 
function presionEnlace(e)
{
  if (window.event)
  {
    window.event.returnValue=false;
    var url=window.event.srcElement.getAttribute('href');
    cargarHoroscopo(url);     
  }
  else
    if (e)
    {
      e.preventDefault();
      var url=e.target.getAttribute('href');
      cargarHoroscopo(url);     
    }
}
 
 
var conexion1;
function cargarHoroscopo(url) 
{
  if(url=='')
  {
    return;
  }
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open("GET", url, true);
  conexion1.send(null);
}
 
function procesarEventos()
{
  var detalles = document.getElementById("detalles");
  if(conexion1.readyState == 4)
  {
    detalles.innerHTML = conexion1.responseText;
  } 
  else 
  {
    detalles.innerHTML = 'Cargando...';
  }
}
 
//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}
 
function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

Código HTML:

Ver original<html>
<head>
<title>Problema</title>
<script src="funciones.js" language="JavaScript"></script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1>Titulo</h1>
<div id="menu">
 
 
<p><a id="enlace1" href="pagina1.php?cod=1"></a></p>
<p><a id="enlace2" href="pagina1.php?cod=2"></a></p>
<p><a id="enlace3" href="pagina1.php?cod=3"></a></p>
<p><a id="enlace4" href="pagina1.php?cod=4"></a></p>
<p><a id="enlace5" href="pagina1.php?cod=5"></a></p>
<p><a id="enlace6" href="pagina1.php?cod=6"></a></p>
<p><a id="enlace7" href="pagina1.php?cod=7"></a></p>
<p><a id="enlace8" href="pagina1.php?cod=8"></a></p>
<p><a id="enlace9" href="pagina1.php?cod=9"></a></p>
<p><a id="enlace10" href="pagina1.php?cod=10"></a></p>
<p><a id="enlace11" href="pagina1.php?cod=11"></a></p>
<p><a id="enlace12" href="pagina1.php?cod=12"></a></p>
 
</div>
<div id="detalles">Seleccione la posición que desee.</div>
 
 
</body>
 
</html>

truman_truman · #2 (**permalink**) 29/04/2012, 15:03

No entiendo , querés hacer una tabla y no usas <table>

#3 (**permalink**) 29/04/2012, 15:21

Cita:

Iniciado por truman_truman

No entiendo , querés hacer una tabla y no usas <table>

Usaría lo que fuera necesario, pero he visto otros ejemplos que hacen un bucle en php con "n" filas y columnas y luego se muestra la tabla ya hecha en el html.

En los archivos que adjunto se muestra una fila de 12 posiciones, y creo que está hecha con "padding" en CSS, pero me gustaría hacer una tabla con filas y también columnas. Perdón si no me he explicado de forma adecuada, estoy bastante perdido y me gustaría alguna orientación.

Muchas gracias y perdón por las molestias

truman_truman · #4 (**permalink**) 29/04/2012, 16:13

Ok debería ser algo así

Código PHP:

 
<table> 
   <tr> 
        <td>Encabezado columna 1</td> 
        <td>Encabezado columna 2</td> 
        <td>Encabezado columna 3</td> 
   </tr> 
 
<?php while(){?> 
 
   <tr> 
        <td>Dato 1</td> 
        <td>Dato 2</td> 
        <td>Dato 3</td> 
   </tr> 
 
<?php }?> 
 
 
</table>

lo que está dentro del while es lo que se va a repetir

Espero que se entienda, cualquier cosa avisá

#5 (**permalink**) 29/04/2012, 16:42

Cita:

Iniciado por truman_truman

Ok debería ser algo así

Código PHP:

 
<table> 
   <tr> 
        <td>Encabezado columna 1</td> 
        <td>Encabezado columna 2</td> 
        <td>Encabezado columna 3</td> 
   </tr> 
 
<?php while(){?> 
 
   <tr> 
        <td>Dato 1</td> 
        <td>Dato 2</td> 
        <td>Dato 3</td> 
   </tr> 
 
<?php }?> 
 
 
</table>

lo que está dentro del while es lo que se va a repetir

Espero que se entienda, cualquier cosa avisá

Perfecto!! Eso es lo que yo quería decir!! Pero para que yo lo entienda mejor, ¿también hacer con un bucle "for"? Es decir, algo como esto

Código PHP:

  for ($i=1;$i<=10;$i++) //número de tablas que se generan 
{ 
    echo "<table width='50px' border=1 cellspacing=5>\n"; 
    echo "<tr>\n"; 
for ($tabla=1;$tabla<=5;$tabla++)  
{ 
    for ($j=1;$j<=5;$j++) //código de la tabla 
    { 
        echo "<td></td>\n"; 
    } 
    echo "</tr>\n"; 
} 
} 
echo "</table>";

truman_truman · #6 (**permalink**) 29/04/2012, 16:47

que datosqueres mostrar? o que tipo de tabla es la que querás hacer?
podrías poner un ejemplo?

#7 (**permalink**) 29/04/2012, 17:00

Cita:

Iniciado por truman_truman

que datosqueres mostrar? o que tipo de tabla es la que querás hacer?
podrías poner un ejemplo?

Es justamente lo que hiciste con while. Eso era lo que quería. Pero aún no sé cuántas filas y columnas tendrá, y por eso me conviene más el "for", para elegir el número. Para mi, al menos, es más fácil escribir el número en el for que escribir la condición del while.

¿Se podría hacer eso mismo con for? Por ejemplo con 25 filas y 25 columnas.

truman_truman · #8 (**permalink**) 29/04/2012, 17:03

el while, dice que mientras haya datos se iterará, es lo más conveniente.
con el for anidado que pusiste antes, estás creando como 9 tablas distintas, por eso no entiendo bien lo que querés lograr

#9 (**permalink**) 29/04/2012, 17:12

Cita:

Iniciado por truman_truman

el while, dice que mientras haya datos se iterará, es lo más conveniente.
con el for anidado que pusiste antes, estás creando como 9 tablas distintas, por eso no entiendo bien lo que querés lograr

La idea es que el usuario haga clic en cada posición de la tabla (que está conectada a una base de datos), hasta encontrar un dato que estará en una posición aleatoria de la tabla. Por eso necesitaba pedír aquí ayuda para tener una tabla antes con n filas y n columnas.