Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite galera, vamos ver se consigo me expressar direito.
Tenho uma tabela e, dentro dela tenho diversas outras tabelas, cada uma com name e id definidos.
O que quero fazer é, ao clicar em um link, localizado em uma td da tabela principal, ele chame uma função (passando como parâmetro o ID de uma tabela secundária) que altere o parâmetro de display ou visibility (mais apropriado o display para não ocupar o espaço na página) da tabela secundária.
Ou seja, cada vez que clico no link, ele mostra ou oculta os dados dessa tabela.
Abaixo, segue um exemplo de código html e a função java utilizada. No exemplo, a tabela principal possui 3 linhas e está sendo exibida a tabela secundária (detalhes) da segunda linha.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Apoio</title>
</head>
<body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<script language="JavaScript">
function mostraDetalhes("tabela")</script>
<table width="70%" height="8%" cellpadding="0" cellspacing="0" border="0">
<tr>
<th colspan=4 style="padding-bottom:20px; padding-top:30px; border:0">DADOS</th>
</tr>
<tr>
<th valign=center style="padding-bottom:20px">APPLID/TGROUP</th>
<th valign=center style="padding-bottom:20px">STND</th>
<th valign=center style="padding-bottom:20px">STIS</th>
<th valign=center style="padding-bottom:20px">STWE</th>
</tr>
<tr>
<td align=center><a href="javascript:mostraDetalhes(0A01);">0A01</a></td>
<td align=center>48</td>
<td align=center>35</td>
<td align=center>10</td>
</tr>
<tr>
<td colspan="4">
<table id="0A01" name="0A01" width="30%" align=center style="display:none">
<tr bgcolor="#708090">
<td align=center rowspan="2" valign=center>ESTATISTICAS</td>
<td align=center valign=center>QR</td>
<td align=center valign=center>DBT</td>
<td align=center valign=center>ENQ</td>
<td align=center valign=center>AMX</td>
</tr>
<tr bgcolor="#708090">
<td align=center valign=center>34</td>
<td align=center valign=center>23</td>
<td align=center valign=center>65</td>
<td align=center valign=center>45</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align=center><a href="javascript:mostraDetalhes(0A02);">0A02</a></td>
<td align=center>22</td>
<td align=center>15</td>
<td align=center>33</td>
</tr>
<tr>
<td colspan="4">
<table id="0A02" name="0A02" width="30%" align=center style="display:block">
<tr bgcolor="#708090">
<td align=center rowspan="2" valign=center>ESTATISTICAS</td>
<td align=center valign=center>QR</td>
<td align=center valign=center>DBT</td>
<td align=center valign=center>ENQ</td>
<td align=center valign=center>AMX</td>
</tr>
<tr bgcolor="#708090">
<td align=center valign=center>87</td>
<td align=center valign=center>78</td>
<td align=center valign=center>78</td>
<td align=center valign=center>45</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align=center><a href="javascript:mostraDetalhes(0A03);">0A03</a></td>
<td align=center>34</td>
<td align=center>78</td>
<td align=center>70</td>
</tr>
<tr>
<td colspan="4">
<table id="0A03" name="0A03" width="30%" align=center style="display:none">
<tr bgcolor="#708090">
<td align=center rowspan="2" valign=center>ESTATISTICAS</td>
<td align=center valign=center>QR</td>
<td align=center valign=center>DBT</td>
<td align=center valign=center>ENQ</td>
<td align=center valign=center>AMX</td>
</tr>
<tr bgcolor="#708090">
<td align=center valign=center>34</td>
<td align=center valign=center>90</td>
<td align=center valign=center>23</td>
<td align=center valign=center>66</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Desde já agradeço!Carregando comentários...