Script para ocultar una tabla

chalchis · #1 (**permalink**) 12/03/2005, 22:38

Estoy haciedo una carrito de compras y se mostrara la lista con los productos comprados pero que al darle click para ver detalles en cada producto se vean las caracteristicas del producto que al darle clik a una imagen o boton muestre los detalles del producto en la tabla que estaba oculta y asi sucesivamente.

Tengo este script para ocultar y mostrar una tabla pero solo me funciona para solo una tabla y la tabla la muestro y oculto,
con dos botones.

Mi pregunta es como puedo usar esta funcion o si tienen una mejor opcion para repetir el proceso en varias tablas y que solo se haga en un solo boton.

<script type="text/javascript">
function ver()
{
var tester = document.getElementById('Tester');
tester.style.display = 'block';
}

function ciego()
{
var tester = document.getElementById('Tester');
tester.style.display = 'none';
}
</script>

//aqui oculto la tabla

<table width="236" border="0" align="center" cellpadding="0" cellspacing="1" id="Tester" style="display: none">
<tr>
<td></td>
<tr>
</table>

un ejmplo algo como esto
http://www.riklund.org/scripts.php

Carlitos · #2 (**permalink**) 13/03/2005, 03:49

Hola.

Prueba esto:

Código:

<script type="text/javascript">
function ver(cual)
{
var tester = document.getElementById(cual);
tester.style.display = 'block';
}

function ciego(cual)
{
var tester = document.getElementById(cual);
tester.style.display = 'none';
}
</script>

y pasa el nombre de la tabla con tus botones.

Código:

<input type="button" value="Ver" onclick="ver('Tester')">
<input type="button" value="Ocultar" onclick="ciego('Tester')">

Ahora bien, si lo que quieres es ver y ocultar con el mismo botón, debes cambiar tus funciones por esta:

Código:

function cambio(cual)
{
if (document.getElementById(cual).style.display == 'none')
   document.getElementById(cual).style.display = 'block'
else
   document.getElementById(cual).style.display = 'none'
}
</script>

y el botón así:

Código:

<input type="button" value="Ver/Ocultar" onclick="cambio('Tester')">

ya dirás cómo te ha ido.

chalchis · #3 (**permalink**) 13/03/2005, 15:20

Gracias Carlos, me sirvio la modificacion que hiciste

susaninhax · #4 (**permalink**) 17/03/2005, 07:03

soi novatilla, quiero hacer exactamente lo que estais hablando, pero soi patosa... tengo echo esto:

<script type="text/javascript">
function cambio(Tester)
{
if (document.getElementById(cual).style.display == 'none')
document.getElementById(cual).style.display = 'block'
else
document.getElementById(cual).style.display = 'none'
}

</script>
<table width="411" border="1" cellspacing="0" cellpadding="0">
<tr onClick="mostrar('qwert')" style="cursor:n-resize;visibility:visible" title="Clic para mostrar Categorías" align="left">
<td background="../imagenes/fondos/barra.gif" colspan="2" ><img src="../imagenes/fondos/botones/cuadr_naranja.gif" width="8" height="8">Compras<input type="button" value="Ver/Ocultar" onclick="cambio('Tester')"></td>
</tr>
<tr align="center">
<td width="394" height="40" class="texto_negro">The FRC advances cooperative relations between franchisees and Burger King Corporation to enable the Burger King system to achieve and maintain the number one rating in service, image, new restaurant development and sales market share within the QSR category. The FRC is comprised of three subcommittees addressing the following issues: Service & Image, Development, and Finance
</td>
</tr>.....

Kiero k cuando pinche en la primera celda donde pone compras, se me muestre el texto ese, y cuando pinche de nuevo desaparezca el texto... pero no soi capas... alguien me peude dar mas pistas...???

muuuuuuuuchas gachas

chalchis · #5 (**permalink**) 17/03/2005, 11:03

<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
function cambio(cual)
{
if (document.getElementById(cual).style.display == 'none')
document.getElementById(cual).style.display = 'block'
else
document.getElementById(cual).style.display = 'none'
}
</script>

</head>

<body>
<table width="477" border="0">
<tr>
<td><input type="button" value="Ver/Ocultar" onclick="cambio('Tester')"></td>
</tr>
<tr>
<td><table width="477" border="1" id="Tester" style="display: none" >
<tr>
<td bgcolor="#FF00FF">graficas</td>
<td bgcolor="#0000FF">graficas</td>
</tr>
</table></td>
</tr>
</table>
<table width="477" border="0">
<tr>
<td><input type="button" value="Ver/Ocultar" onclick="cambio('Tester2')"></td>
</tr>
<tr>
<td><table width="477" border="1" id="Tester2" style="display: none" >
<tr>
<td bgcolor="#FF00FF">pastel</td>
<td bgcolor="#0000FF">pastel</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>

susaninhax · #6 (**permalink**) 17/03/2005, 11:48

Pos que puedo decir, k ahora si k me funciona como yo kiero, muchas gracias por la ayuda, este foro da gusto, con k rapidez contestais, madre mías

Un saludo a todos...

jadi · #7 (**permalink**) 13/04/2005, 19:32

bueno realmente son grandes por el apoyo que nos dan.

saben yo tengo una tabla la cual anda perfecta en el boton de mostrar con una diferencia
este se debe mostrar segun el valor que toma de una funcion en php.
y mi gran dilema es que la funcion showtabla se debe llamar luego de mostrar la tabla en forma directa sin depender de un click.

aca les dejos el codigo plisss

Código:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>show formulario con anexo</title>
<style>

<script language="JavaScript" type="text/javascript">

function showtabla(etiqueta)
{
var cantidad = <? $_SESSION["ocarrito"]->cantidad_articulos();?>

if (cantidad > 0)
{
  document.getElementById(etiqueta).style.display = 'block';
}
else 
{
    document.getElementById(etiqueta).style.display = 'none';  
}
}

//-->
</script>

<table border="0" width="103%" cellspacing="0" cellpadding="0" align="left" height="271" id="formulario" style="display: none">
<tr>

<td width="100%" style="border-top: 1px solid #000000; border-bottom: 1px solid #000000; ; font-family:verdana, arial, sans-serif; color:#000; font-size:11; font-weight:normal" bgcolor="#00FFFF" height="15" colspan="3">
<p align="center"><b>Importante</b></p>
</td>
.
.
.
<td><input type="button" value="Ver/Ocultar" onclick="showtabla('formulario')"></td>
</tr>
<tr>
<td width="720" height="1">
      
</td>
</tr>
</table>

</body>
</html>

quiero cambiar el
<td><input type="button" value="Ver/Ocultar" onclick="showtabla('formulario')"></td>
por una llamada a la funcion showtabla('formulario') directamente

le he dado la vuelta y no lo consigo

gracias
saludos

jadi · #8 (**permalink**) 14/04/2005, 13:45

gracias chicos ya esta solucionado.
es impresionante lo bien que cae un descanso cuando le das vuelta a algo y no te sale
era facil, tan sencillo

codigo html
.
.
.
<script language="JavaScript" type="text/javascript">
{
var cantidad = <? $_SESSION["ocarrito"]->cantidad_articulos();?>;

if (cantidad > 0)
{
document.getElementById('formulario').style.displa y = 'block';
}
else
{
document.getElementById('formulario').style.displa y = 'none';
}
}

//-->
</script>

resto
del
codigo html

saludos

chalchis · #9 (**permalink**) 18/04/2005, 23:02

Felicidades

Reynier · #10 (**permalink**) 07/11/2005, 09:10

Hola a todos:
De verás que hace rato andaba buscando esto y miren Foros del Web me lo ha dado. El método de Carlos a mi me funciona al 100% pero tengo un pequeño problema que no se como resolver. La cosa es que tengo dos imágenes. Una para colapsar la tabla o el elemento DIV en mi caso (ocultarla) y la otra para descolapsar o volver a mostrar lo anteriormente ocultado (msotrar). Ahora son dos las dudas que tengo. La primera es como intercambiar lás imagenes, o sea, supongan que la primera imagen es ocultar cuando de click en ella se oculta la tabla y/o elemento a ocultar y entonces quiero que aparezca la imagen de mostrar. Es eso lo que no se hacer. Intercambiar las imagenes. Lo otro es que si es posible aplicar algún efecto como el de Foros del Web por ejemplo.

Salu2 y desde ya gracias