Foros del Web » Programando para Internet » Javascript »

abrir tabla con un click

 Estas en el tema de abrir tabla con un click en el foro de Javascript en Foros del Web. Necesito saber como lograr esto: Tengo una tabla con un resumen de ventas por vendedor, lo requerido es que al pinchar sobre el link nombre-vendedor ...
  #1 (permalink)  
Antiguo 06/10/2008, 15:08
 
Fecha de Ingreso: octubre-2005
Mensajes: 405
Antigüedad: 18 años, 6 meses
Puntos: 1
abrir tabla con un click
Necesito saber como lograr esto:
Tengo una tabla con un resumen de ventas por vendedor, lo requerido es que al pinchar sobre el link nombre-vendedor se abra un detalle de la ventas de este en otra tabla bajo el resumen.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
<!--
#linea {border-collapse:collapse; border-color:#330099;}
#linea1 {border-collapse:collapse; border-color:#CC3366;}
.Estilo1 {color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; }
.Estilo2 {color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;}
.Estilo3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color:#CC3366; }
-->
</style>
</head>

<body>
<table width=100% border=1 cellspacing=0 cellpadding=2 id=linea>
<tr class=Estilo1 bgcolor=#330099>
<td align=center id=linea>Vendedor</td>
<td align=center id=linea>Factura</td>
<td align=center id=linea>N/Credito</td>
<td align=center id=linea>N/Debito</td>
<td align=center id=linea>Boletas</td>
<td align=center id=linea>Total-Neto</td>
</tr>
<tr class=Estilo2>
<td align=right id=linea><a href='#' title="Mostrar Detalle">Patricio Espinoza</a></td>
<td align=right id=linea>57.000</td>
<td align=right id=linea>1.300</td>
<td align=right id=linea>&nbsp;</td>
<td align=right id=linea>197.480</td>
<td align=right id=linea>253.180</td>
</tr>
<tr>
<td>&nbsp;</td>
<td colspan=4>
<!-- Detalle de Venta -->
<table width=100% border=1 cellspacing=0 cellpadding=2 align=right id=linea1>
<tr class=Estilo3 bgcolor="#FFFFCC">
<td width=25% align=center id=linea1>Documento</td>
<td width=25% align=center id=linea1>A-Pagar</td>
<td width=25% align=center id=linea1>Iva </td>
<td width=25% align=center id=linea1>Neto</td>
</tr>
<tr class=Estilo2>
<td id=linea1>Fac-2815</td>
<td align=right id=linea1>47.900</td>
<td align=right id=linea1>9.100</td>
<td align=right id=linea1>57.000</td>
</tr>
<tr class=Estilo2>
<td id=linea1>NCr-15</td>
<td align=right id=linea1>-1.092</td>
<td align=right id=linea1>-208</td>
<td align=right id=linea1>-1.300</td>
</tr>
<tr class=Estilo2>
<td id=linea1>Bol-142215</td>
<td align=right id=linea1>165.950</td>
<td align=right id=linea1>31.530</td>
<td align=right id=linea1>197.480</td>
</tr>
<tr class=Estilo3 bgcolor="#FFFFCC">
<td align=right id=linea1>Total ==></td>
<td align=right id=linea1>212.758</td>
<td align=right id=linea1>40.422</td>
<td align=right id=linea1>253.180</td>
</tr>
</table>
<!-- Hasta aqui --> </td>
<td>&nbsp;</td>
</tr>
<tr class=Estilo2>
<td align=right id=linea><a href='#' title="Mostrar Detalle">Haroldo Fuentes</a></td>
<td align=right id=linea>341.960</td>
<td align=right id=linea>39.000</td>
<td align=right id=linea>1.200</td>
<td align=right id=linea>289.990</td>
<td align=right id=linea>594.150</td>
</tr>
<tr class=Estilo1 bgcolor="#330099">
<td align=right id=linea>Total ==></td>
<td align=right id=linea>398.960</td>
<td align=right id=linea>40.300</td>
<td align=right id=linea>1.200</td>
<td align=right id=linea>487.470</td>
<td align=right id=linea>847.330</td>
</tr>
</table>
</body>
</html>

Le agradeceria cualquien infoemacion GRACIAS
  #2 (permalink)  
Antiguo 06/10/2008, 23:49
Avatar de marcopoloaz06  
Fecha de Ingreso: julio-2007
Ubicación: México
Mensajes: 457
Antigüedad: 16 años, 9 meses
Puntos: 11
Respuesta: abrir tabla con un click
Hola, deberías de organizar mejor tus atributos de las tablas, hay muchos ids y podrían ser clases, bueno de todos modos aqui te lo dejo
Código javascript: 
Ver original
  1. onload = function(){
  2.         var ele = document.getElementsByTagName( "a" );
  3.         for(var i=0;i<ele.length;i++){
  4.             if( ele[i].title=="Mostrar Detalle" ){
  5.                 ele[i].onclick = function(){
  6.                     var elem = window.event ? 
  7.                                this.parentNode.parentNode.nextSibling :
  8.                                this.parentNode.parentNode.nextSibling.nextSibling;
  9.                     if( elem.getElementsByTagName("table").length == 0 )return false;
  10.                     elem.style.display = elem.style.display == "none" ? "" : "none";
  11.                     return false;
  12.                 };
  13.             }
  14.         }
  15.     };
html:
Código HTML:
<table width="100%" border="1" cellspacing="0" cellpadding="2" id="linea">
<tr class="Estilo1" bgcolor=#330099>
<td align="center" id="linea">Vendedor</td>
<td align="center" id="linea">Factura</td>
<td align="center" id="linea">N/Credito</td>
<td align="center" id="linea">N/Debito</td>
<td align="center" id="linea">Boletas</td>
<td align="center" id="linea">Total-Neto</td>
</tr>
<tr class="Estilo2">
<td align="right" id="linea"><a href='#' title="Mostrar Detalle">Patricio Espinoza</a></td>
<td align="right" id="linea">57.000</td>
<td align="right" id="linea">1.300</td>
<td align="right" id="linea">&nbsp;</td>
<td align="right" id="linea">197.480</td>
<td align="right" id="linea">253.180</td>
</tr>
<tr style="display:none;">
<td>&nbsp;</td>
<td colspan="4">
<!-- Detalle de Venta -->
<table width=100% border=1 cellspacing=0 cellpadding=2 align="right" id="linea1">
<tr class="Estilo3" bgcolor="#FFFFCC">
<td width=25% align="center" id="linea1">Documento</td>
<td width=25% align="center" id="linea1">A-Pagar</td>
<td width=25% align="center" id="linea1">Iva </td>
<td width=25% align="center" id="linea1">Neto</td>
</tr>
<tr class="Estilo2">
<td id="linea1">Fac-2815</td>
<td align="right" id="linea1">47.900</td>
<td align="right" id="linea1">9.100</td>
<td align="right" id="linea1">57.000</td>
</tr>
<tr class="Estilo2">
<td id="linea1">NCr-15</td>
<td align="right" id="linea1">-1.092</td>
<td align="right" id="linea1">-208</td>
<td align="right" id="linea1">-1.300</td>
</tr>
<tr class="Estilo2">
<td id="linea1">Bol-142215</td>
<td align="right" id="linea1">165.950</td>
<td align="right" id="linea1">31.530</td>
<td align="right" id="linea1">197.480</td>
</tr>
<tr class="Estilo3" bgcolor="#FFFFCC">
<td align="right" id="linea1">Total ==></td>
<td align="right" id="linea1">212.758</td>
<td align="right" id="linea1">40.422</td>
<td align="right" id="linea1">253.180</td>
</tr>
</table>
<!-- Hasta aqui --> </td>
<td>&nbsp;</td>
</tr>
<tr class="Estilo2">
<td align="right" id="linea"><a href='#' title="Mostrar Detalle">Haroldo Fuentes</a></td>
<td align="right" id="linea">341.960</td>
<td align="right" id="linea">39.000</td>
<td align="right" id="linea">1.200</td>
<td align="right" id="linea">289.990</td>
<td align="right" id="linea">594.150</td>
</tr>
<tr style="display:none;">
<td>&nbsp;</td>
<td colspan="4">
<!-- Detalle de Venta -->
<table width=100% border=1 cellspacing=0 cellpadding=2 align="right" id="linea1">
<tr class="Estilo3" bgcolor="#FFFFCC">
<td width=25% align="center" id="linea1">Documento</td>
<td width=25% align="center" id="linea1">A-Pagar</td>
<td width=25% align="center" id="linea1">Iva </td>
<td width=25% align="center" id="linea1">Neto</td>
</tr>
<tr class="Estilo2">
<td id="linea1">Fac-2815</td>
<td align="right" id="linea1">470.900</td>
<td align="right" id="linea1">91.100</td>
<td align="right" id="linea1">557.000</td>
</tr>
<tr class="Estilo2">
<td id="linea1">NCr-15</td>
<td align="right" id="linea1">-10.092</td>
<td align="right" id="linea1">-2008</td>
<td align="right" id="linea1">-10.300</td>
</tr>
<tr class="Estilo2">
<td id="linea1">Bol-142215</td>
<td align="right" id="linea1">165.9050</td>
<td align="right" id="linea1">31.5030</td>
<td align="right" id="linea1">1907.480</td>
</tr>
<tr class="Estilo3" bgcolor="#FFFFCC">
<td align="right" id="linea1">Total ==></td>
<td align="right" id="linea1">21250.758</td>
<td align="right" id="linea1">4050.422</td>
<td align="right" id="linea1">25503.180</td>
</tr>
</table>
<!-- Hasta aqui --> </td>
<td>&nbsp;</td>
</tr>

<tr class="Estilo1" bgcolor="#330099">
<td align="right" id="linea">Total ==></td>
<td align="right" id="linea">398.960</td>
<td align="right" id="linea">40.300</td>
<td align="right" id="linea">1.200</td>
<td align="right" id="linea">487.470</td>
<td align="right" id="linea">847.330</td>
</tr>
</table>
bueno aver si te sirve SAludos ;]
__________________
Aerolíneas Alicia :D
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 11:18.