Expandir un TR/TD

DragonX · #1 (**permalink**) 12/09/2007, 13:55

Hola amigos, estuve investigando bastante, pero no encontre nada (seguramente es porque no se buscar bien del todo :P)

Les comento un poco que es lo que quiero hacer.

Tengo una tabla formateada integramente en CSS, este es el código CSS:

Código HTML:

body{
  font-family: Arial;
  padding: 5px;
}
h1{
  color: red;
}
h1 +p {
  margin-top: -20px;
  font-weight: bold;
}
#nav >li{
  font-family: "Trebuchet MS";
  color: #0000FF;
}
table{
  width: 80%;
}
table, th, td {
	border: 1px solid #D4E0EE;
	border-collapse: collapse;
	font-family: "Trebuchet MS", Arial, sans-serif;
	color: #555;
}
caption {
	font-size: 150%;
	font-weight: bold;
	margin: 5px;
}
td, th {
	padding: 4px;
}
.fecha{
   width: 60px;
}
.dni{
  width: 50px;
}
thead th {
	text-align: center;
	background: #E6EDF5;
	color: #4F76A3;
	font-size: 100% !important;
}
tbody th {
	font-weight: bold;
}

tbody tr {
  background: #FCFDFE;
}
tbody tr.odd { 
  background: #F7F9FC; 
}
table a:link {
	color: #718ABE;
	text-decoration: underline;
}
table a:visited {
	color: #718ABE;
	text-decoration: underline;
}
table a:hover {
	color: #ff5900;
	text-decoration: underline !important;
}
tfoot th, tfoot td {
	font-size: 85%;
}
tr:hover, tr.odd:hover{
  background:#E6EDF5;
}

Y este es el HTML:

Código HTML:

<body>
<h1>Este es el titulo</h1>
<p>Este es el copete</p>
<p>Este es el cuerpo del texto</p>
<ul id="nav">
  <li>lista 1</li>
  <li>lista 2</li>
    <ul>
      <li>Sub lista 1</li>
      <li>Sub lista 2</li>
    </ul>
  <li>lista 3</li>
</ul>
<table summary="Tabla de ejemplo">
	<caption>Tablas con CSS</caption>
	<thead>
		<tr>
			<th>Datos %</th>
			<th>Fecha</th>
			<th>D.N.I.</th>
			<th>Datos %</th>
			<th>Datos %</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Dato 11</th>
			<td class="fecha">05/06/07</td>
			<td class="dni">24.353.185</td>
			<td>Dato 14</td>
			<td><a href="#">Dato 15</a></td>
		</tr>
		<tr class="odd">
			<th>Dato 21</th>
			<td class="fecha">05/06/06</td>
			<td class="dni">24.353.185</td>
			<td>Dato 24</td>
			<td><a href="#">Dato 25</a></td>
		</tr>
		<tr>
			<th>Dato 31</th>
			<td class="fecha">05/06/05</td>
			<td class="dni">24.353.185</td>
			<td>Dato 34</td>
			<td><a href="#">Dato 35</a></td>
		</tr>
		<tr class="odd">
			<th>Dato 41</th>
			<td class="fecha">05/06/04</td>
			<td class="dni">24.353.185</td>
			<td>Dato 44</td>
			<td><a href="#">Dato 45</a></td>			
		</tr>
	</tbody>
</table>

</body>

Como verán dentro de cada <tr></tr> existe un TD que tiene un dato con link (<td><a href="#">Dato 45</a></td>). Lo que quiero lograr es que al hacer click sobre este vinculo, el TR se agrande y me muestre una información, la cuál debería estar oculta. ¿me explico?

Seria algo así:

Dato | Dato1 | Dato 2 | link .... resumen de texto

Al hacer clik debería verse algo así:

Dato | Dato1 | Dato 2 | aca iría todo el texto que anteriormente se mostro como resumen.

Desde ya mil millón gracias!!!
DX

Daniel Ulczyk · #2 (**permalink**) 12/09/2007, 15:06

Y algo como esto te serviría?

Tooltips for Prototype

Porque el tema de tener un TR dinámico... no sé, puede ser...

kaninox · #3 (**permalink**) 12/09/2007, 15:11

sera un tooltip siguiendo la misma linea aqui encontre uno a puro css
http://www.tallerwebmaster.com/Tutor...n-CSS-c-6.html

edito: si parece que es tooltip por que arriba me ganaron X)

Daniel Ulczyk · #4 (**permalink**) 12/09/2007, 15:30

Jah! es cierto... no sé para que se me ocurrió Prototype si con CSS puro se puede solucionar.
Yo tenía guardado el enlace al sitio de Ask the CSS Guy (por demás recomendable)
este es el ejemplo
Que es exactamente lo mismo...

DragonX · #5 (**permalink**) 12/09/2007, 16:12

Mil gracias amigos, pero aparentemente me exprese muyyyyyyy mal!!!!

lo que necesito es un "mas info" (por así decirlo) en cada TR y que al hacer click sobre este expanda el TR para abajo y muestre toda la información.

A ver si esta me salió bien

kaninox · #6 (**permalink**) 13/09/2007, 01:29

mm tu dices algo como ocultar una capa y mostrarla al hacer click en leer mas..

como esto..
http://juglar103.blogsome.com/2006/1...tar-un-bloque/
o esto

http://www.forosdelweb.com/f13/mostr...0/#post2078117

illman · #7 (**permalink**) 13/09/2007, 01:33

Puesdes colocar la info extendida en una capa oculta, algo como

<div style="display: none;" id="masinfo">la info extendida</div>

y colocar en el enlace el código js que cambie la propiedad display algo como

<a href="#" onclick="document.masinfo.style.display=block;">ab rir capa</a>

Si no quieres cargar el contenido extendido antes de que se haga click, puedes hacer lo mismo pero cargan vía ajax el contenido en el momento de hacer click.

a ver si te sirve.

kahlito · #8 (**permalink**) 13/09/2007, 11:44

También puedes hacerlo solo con css y sin javascript:

http://tutorials.alsacreations.com/affiche/

Ejemplos:

http://tutorials.alsacreations.com/affiche/affiche.htm
http://tutorials.alsacreations.com/a...roulantcss.htm
http://tutorials.alsacreations.com/affiche/image.htm

Saludos

DragonX · #9 (**permalink**) 14/09/2007, 06:54

Mil gracias a todos!!!!! todo me sirvió, el tooltip lo voy a usar seguramente, y la expansión era la que buscaba......

de nuevo mil gracias a todos!!!