Publicado em 21 de nov.

Alterar de Javascript para Jquery

Galera,

Criei esta função em javascript porem queria fazer algo melhor em jquery, alguem poderia me ajudar de por onde começar ?

A função ela esconde as linhas de uma tabela e ao clicar nas tds ele aparece uma linha com uma descrição sempre uma por vez.

Basicamente é um hidden/view

<script language="JavaScript" type="text/javascript">
function participante(id) {
	var tds = document.getElementsByTagName('tr');
	for (var i=0; i<tds.length; i++){
 var link = tds[i];
 var rel = link.getAttribute('id');
 if ((rel.substring(0, 14)) && (rel.substring(0, 14)) == 'tdParticipante'){
 if (document.getElementById("tdParticipante"+rel.substring(14, 16)).style.display == ''){
 document.getElementById("cabParticipante"+rel.substring(14, 16)).className = 'participante p'+ rel.substring(14, 16) +' cursor';
 }
 link.style.display = 'none';
 }

 if ((rel.substring(0, 14)) && (rel.substring(0, 14)) == 'ddParticipante'){
 if (document.getElementById("tdParticipante"+rel.substring(14, 16)).style.display == ''){
 document.getElementById("cabParticipante"+rel.substring(14, 16)).className = 'participante p'+ rel.substring(14, 16) +' cursor';
 }
 link.style.display = 'none';
 }
	}

 document.getElementById("cabParticipante"+id).className = 'participante p'+id+' cursor selected';

	if(document.getElementById("tdParticipante"+id).style.display=="none"){
 document.getElementById("tdParticipante"+id).style.display="";
 }
 else {
 document.getElementById("tdParticipante"+id).style.display="none";
 }

	if(document.getElementById("ddParticipante"+id).style.display=="none"){
 document.getElementById("ddParticipante"+id).style.display="";
 }
 else {
 document.getElementById("ddParticipante"+id).style.display="none";
 }
}
</script>

Obrigado galera!!!!

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 21 de nov.

mostre como é o html q esse código afeta.

filipescoob· 13 de dez.

>
mostre como é o html q esse código afeta.

<style type="text/css">

.cabecalho

{

font-weight:bold;
vertical-align:middle;
height:30px;
padding-left:10px;
font-family: Verdana, Geneva, sans-serif;
font-size:11px;
}
.faixas

{

font-weight:bold;
text-align:center;
vertical-align:middle;
height:30px;
font-family: Verdana, Geneva, sans-serif;
font-size:11px;

}
.participante

{

vertical-align:middle;
padding-left:10px;
font-family: Verdana, Geneva, sans-serif;
font-size:11px;
}

.participante : hover {

border:1px #efefef;
}
.f1

{

background-color:#e4f1fb;
}
.f2 {
background-color:#d7ebf9;
}

.p00 {font-size:10px; } .p0 {font-size:11px; } .p01 {text-align:center; background: #00FFFF;} .selected { font-weight:bold; border:1px solid #000;} .p02 {text-align:center; background: #00CC66;} .p03 {text-align:center; background: #FFFF00;} .p04 {text-align:center; background: #FF6600;} .p05 {text-align:center; background: #FF99FF;} .p06 {text-align:center; background: #66CCFF;} .p07 {text-align:center; background: #33FF33;} .p08 {text-align:center; background: #FF9933;} .p09 {text-align:center; background: #FFCC66;} .p10 {text-align:center; background: #33CCFF;} .p11 {text-align:center; background: #FF6699;} .p12 {text-align:center; background: #99CC99;} .p13 {text-align:center; background: #CC6633;} .p14 {text-align:center; background: #33CCCC;} .p15 {text-align:center; background: #99FF33;} .p16 {text-align:center; background: #FFCCFF;} .p17 {text-align:center; background: #999933;} .p18 {text-align:center; background: #FFCC99;} .p19 {text-align:center; background: #CC99FF;} .p20 {text-align:center; background: #99CCFF;} .p21 {text-align:center; background: #66CC66;} .p22 {text-align:center; background: #FFFF66;} .p23 {text-align:center; background: #FF9966;} .p24 {text-align:center; background: #CCCC33;} .p25 {text-align:center; background: #CC66CC;} .p26 {text-align:center; background: #0099CC;} .p27 {text-align:center; background: #00CC00;} .p28 {text-align:center; background: #CCFF00;} .p29 {text-align:center; background: #FFFF99;} .p30 {text-align:center; background: #CC99CC;} .p31 {text-align:center; background: #6699CC;} .p32 {text-align:center; background: #66CC00;} .p33 {text-align:center; background: #FFFF33;} .p34 {text-align:center; background: #FF9900;} .p35 {text-align:center; background: #9966CC;} .p36 {text-align:center; background: #99FFFF;} .p37 {text-align:center; background: #CCFF33;} .p38 {text-align:center; background: #FF99CC;} .p39 {text-align:center; background: #6699FF;} .p40 {text-align:center; background: #9966FF;} .cursor { cursor:pointer; }

</style>
</style>

<body>
<table width="100%" border=1 class="ui-widget-content" cellspacing="0" cellpadding="0">
<tr>
 <td colspan="6" class="state-default ui-state-active cabecalho"><b>Mapa de investimento</b></td>
</tr>

<tr>
<td width="10%" class="ui-state-default cabecalho" style="border-right:0px;"><center>Faixa Inicial</center></td>
<td width="10%" class="ui-state-default cabecalho" style="border-left:0px;"><center>Faixa Final</center></td>
<td width="80%" class="ui-state-default cabecalho" style="border-left:0px;"><center>Participações e Modalidades</center></td>
</tr>

<tr>
 <td rowspan="2" width="3%" class="ui-state-default f1 faixas" style="border-right:0px; border-bottom:0px; border-top:0px;">0,00</td>
 <td rowspan="2" width="3%" class="ui-state-default f1 faixas" style="border-left:0px; border-bottom:0px; border-top:0px;">100.000,00</td>
 <td colspan="2" style="padding-top:1px;">
<table width="100%" cellspacing="1" cellpadding="0">
	<tr height="30px";>
 <td class="participante p01 cursor" width="15%" onClick="participante('01');" id="cabParticipante01">12,5% - Petro</td>
 <td class="participante p02 cursor" width="15%" onClick="participante('02');" id="cabParticipante02">12,5% - Petro</td>
 <td class="participante p03 cursor" width="25%" onClick="participante('03');" id="cabParticipante03">25% - Petro</td>
 <td class="participante p04 cursor" width="25%" onClick="participante('04');" id="cabParticipante04">25% - Petro</td>
 <td class="participante p05 cursor" width="25%" onClick="participante('05');" id="cabParticipante05">25% - Petro</td>
	</tr>
</table>
 </td>
</tr>
<tr>
<td>
	<table width="100%" cellspacing="1" cellpadding="0">
 <tr height=15px;>
 <td class="participante p06 cursor" onClick="participante('06');" id="cabParticipante06">INVESTIMENTO - 1.000.000,00</td>
 </tr>
	</table>
</td>
</tr>

<tr>
 <td width="3%" class="ui-state-default f2 faixas" style="border-right:0px; border-bottom:0px;">100.000,01</td>
 <td width="3%" class="ui-state-default f2 faixas" style="border-left:0px; border-bottom:0px;">200.000,00</td>
 <td colspan="2">
<table width="100%" cellspacing="1" cellpadding="0">
	<tr height="30px";>
 <td class="participante p07 cursor" width="25%" onClick="participante('07');" id="cabParticipante07">25% - Petro</td>
 <td class="participante p08 cursor" width="25%" onClick="participante('08');" id="cabParticipante08">25% - Petro</td>
 <td class="participante p09 cursor" colspan="3"width="50%" onClick="participante('09');" id="cabParticipante09">50% - ERRO</td>
	</tr>
</table>
 </td>
</tr>

 <tr>
 <td width="3%" class="ui-state-default f1 faixas" style="border-right:0px; border-bottom:0px;">200.000,01</td>
 <td width="3%" class="ui-state-default f1 faixas" style="border-left:0px; border-bottom:0px;">300.000,00</td>
 <td colspan="2">
<table width="100%" cellspacing="1" cellpadding="0">
	<tr height="30px";>
 <td class="participante p10 cursor" width="33%" onClick="participante(10);" id="cabParticipante10">33% - Petro</td>
 <td class="participante p11 cursor" width="33%" onClick="participante(11);" id="cabParticipante11">33% - Petro</td>
 <td class="participante p12 cursor" colspan="2" width="33%" onClick="participante(12);" id="cabParticipante12">33% - Petro</td>
	</tr>
</table>
 </td>
</tr>
<tr>
 <td width="3%" class="ui-state-default f2 faixas" style="border-right:0px; border-bottom:0px;">300.000,01</td>
 <td width="3%" class="ui-state-default f2 faixas" style="border-left:0px; border-bottom:0px;">400.000,00</td>
 <td colspan="2">
<table width="100%" cellspacing="1" cellpadding="0">
	<tr height="30px";>
 <td class="participante p13 cursor" width="30%" onClick="participante(13);" id="cabParticipante13">30% - ERRO</td>
 <td class="participante p14 cursor" width="16%" onClick="participante(14);" id="cabParticipante14">16% - ERRO<td>
 <td class="participante p15 cursor" colspan="2" width="54%" onClick="participante(15);" id="cabParticipante15">42% - ERRO</td>
	</tr>
</table>
 </td>
</tr>
<tr>
 <td width="3%" class="ui-state-default f1 faixas" style="border-right:0px; border-bottom:0px;">400.000,01</td>
 <td width="3%" class="ui-state-default f1 faixas" style="border-left:0px; border-bottom:0px;">500.000,00</td>
 <td colspan="2">
<table width="100%" cellspacing="1" cellpadding="0">
	<tr height="30px";>
 <td class="participante p16 cursor" colspan="2" onClick="participante(16);" id="cabParticipante16" width="50%">50% - ERRO</td>
 <td class="participante p17 cursor" colspan="2" onClick="participante(17);" id="cabParticipante17" width="50%">50% - ERRO</td>
	</tr>
</table>
 </td>
</tr>
 <tr>
 <td width="3%" class="ui-state-default f2 faixas" style="border-right:0px; border-bottom:0px;">500.000,01</td>
 <td width="3%" class="ui-state-default f2 faixas" style="border-left:0px; border-bottom:0px;">600.000,00</td>
 <td colspan="2">
<table width="100%" cellspacing="1" cellpadding="0">
	<tr height="30px";>
 <td class="participante p18 cursor" colspan="4" onClick="participante(18);" id="cabParticipante18">100% - ERRO</td>
	</tr>
</table>
 </td>
</tr>
<tr>
 <td width="3%" class="ui-state-default f1 faixas" style="border-right:0px; border-bottom:0px;">600.000,01</td>
 <td width="3%" class="ui-state-default f1 faixas" style="border-left:0px; border-bottom:0px;">700.000,00</td>
 <td colspan="2">
<table width="100%" cellspacing="1" cellpadding="0">
	<tr height="30px";>
 <td class="participante p19 cursor" colspan="4" onClick="participante(19);" id="cabParticipante19">100% - ERRO</td>
	</tr>
</table>
 </td>
</tr>
</table>

<table width="100%" class="ui-widget-content" cellspacing="1" cellpadding="0">
 <tr height="30px";>
	<td colspan="2" class="state-default ui-state-active cabecalho"><b>Legenda</b></td>
 </tr>
<tr height="30px";>
	<td colspan="2" class="f1 participante"> Clique no mapa acima para ver o detalhe </td>
</tr>
<tr height="30px" id="tdParticipante01" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p01"> </td>
	<td class="f1 participante ui-state-default"> Participante 01</td>
</tr>

<tr height="30px" id="ddParticipante01" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante02" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p02"> </td><td class="f2 participante ui-state-default"> Participante 02</td>
</tr>

<tr height="30px" id="ddParticipante02" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante03" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p03"> </td><td class="f1 participante ui-state-default"> Participante 03</td>
</tr>

<tr height="30px" id="ddParticipante03" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante04" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p04"> </td><td class="f2 participante ui-state-default"> Participante 04</td>
</tr>

<tr height="30px" id="ddParticipante04" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GN:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante05" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p05"> </td><td class="f1 participante ui-state-default"> Participante 05</td>
</tr>

<tr height="30px" id="ddParticipante05" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante06" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p06"> </td><td class="f2 participante ui-state-default"> Participante 06</td>
</tr>

<tr height="30px" id="ddParticipante06" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">taxa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Tipo:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Quant.:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Valor:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Valor pago total:</td>
 <td class="participante">Sim</td>
 </tr>

	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante07" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p07"> </td><td class="f1 participante ui-state-default"> Participante 07</td>
</tr>

<tr height="30px" id="ddParticipante07" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante08" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p08"> </td><td class="f2 participante ui-state-default"> Participante 08</td>
</tr>

<tr height="30px" id="ddParticipante08" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante09" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p09"> </td><td class="f1 participante ui-state-default"> Participante 09</td>
</tr>

<tr height="30px" id="ddParticipante09" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante10" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p10"> </td><td class="f2 participante ui-state-default"> Participante 10</td>
</tr>

<tr height="30px" id="ddParticipante10" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante11" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p11"> </td><td class="f1 participante ui-state-default"> Participante 11</td>
</tr>

<tr height="30px" id="ddParticipante11" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante12" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p12"> </td><td class="f2 participante ui-state-default"> Participante 12</td>
</tr>

<tr height="30px" id="ddParticipante12" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante13" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p13"> </td><td class="f1 participante ui-state-default"> Participante 13</td>
</tr>

<tr height="30px" id="ddParticipante13" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante14" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p14"> </td><td class="f2 participante ui-state-default"> Participante 14</td>
</tr>

<tr height="30px" id="ddParticipante14" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante15" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p15"> </td><td class="f1 participante ui-state-default"> Participante 15</td>
</tr>

<tr height="30px" id="ddParticipante15" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante16" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p16"> </td><td class="f2 participante ui-state-default"> Participante 16</td>
</tr>

<tr height="30px" id="ddParticipante16" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante17" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p17"> </td><td class="f1 participante ui-state-default"> Participante 17</td>
</tr>

<tr height="30px" id="ddParticipante17" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante18" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p18"> </td><td class="f2 participante ui-state-default"> Participante 18</td>
</tr>

<tr height="30px" id="ddParticipante18" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

<tr height="30px" id="tdParticipante19" style="display:none;">
	<td style="width:3%;" height="20px" class="participante p19"> </td><td class="f1 participante ui-state-default"> Participante 19</td>
</tr>

<tr height="30px" id="ddParticipante19" style="display:none;">
 <td colspan="2">
	<table>
 <tr height="20px" >
 <td class="cabecalho">LMG Total:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão Faixa:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Comissão:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">GNPI:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Faixa:</td>
 <td class="participante">Sim</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Bonus:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Limitação:</td>
 <td class="participante">0,00</td>
 </tr>
 <tr height="20px" >
 <td class="cabecalho">Agencia:</td>
 <td class="participante">Sim</td>
 </tr>
	</table>
 </td>
</tr>

</table>
</body>

William Bruno beleza!?

Conseguiu entender?

Alguem pode me ajudar?

Com jquery é bem mais simples, creio que nao precisa fazer o loop, mas nao tenho ideia de por onde começar, preciso apenas de uma luz de como fazer.

Obrigado

Galera,

Depois de todos estes dias consegui fazer funcionar, o problema é que não rola no IE apenas no Chrome e Firefox.

Alguém sabe o porque? Tentei com .hide() e .css() mas nenhum funciona no IE

$('table.interno tr td').click(function() {
 //alert('#tdparticipante'+this.id);
 $('#legenda .tdParticipante').css("display", "none");
 $('#legenda .ddParticipante').css("display", "none");

 $('#tdParticipante'+this.id).show();
 $('#ddParticipante'+this.id).slideDown("slow");
});

Lembro que esta dentro da chave

(function($) {
 $(document).ready(function() {

e que adicionai nas trs da legenda as classes .tdParticipante e .ddParticipante

.ddparticipante{ display:none;}
.tdparticipante{ display:none;}

<tr height="30px" id="tdParticipante01" class="tdparticipante">
 << conteúdo >>
<tr height="30px" id="ddParticipante01" class="ddparticipante">
 << conteúdo >>

Alguém sabe o porque não funciona no IE?

filipescoob· 19 de dez.

Mário Monteiro, boa tarde,

Vi que editou o post, ficou organizado, porem desta maneira ficou ruim das pessoas me ajudarem, porque ajuntou uma solução (que esta no final) junto a uma duvida e um código gigante no inicio. Estou postando novamente abaixo, pois são assuntos distintos, o abaixo é uma solução que encontrei dias depois de postar a duvida porem ela não funciona no IE, onde a duvida mudou (funcionou não funcionando).

Obrigado

---------------------------------------------------------------

Galera,

Depois de todos estes dias consegui fazer funcionar, o problema é que não rola no IE apenas no Chrome e Firefox.

Alguém sabe o porque? Tentei com .hide() e .css() mas nenhum funciona no IE

 $('table.interno tr td').click(function() {
 //alert('#tdparticipante'+this.id);
 $('#legenda .tdParticipante').css("display", "none");
 $('#legenda .ddParticipante').css("display", "none");

 $('#tdParticipante'+this.id).show();
 $('#ddParticipante'+this.id).slideDown("slow");
 });

Lembro que esta dentro da chave

(function($) {
 $(document).ready(function() {

e que adicionai nas trs da legenda as classes .tdParticipante e .ddParticipante

.ddparticipante{ display:none;}
.tdparticipante{ display:none;}

 <tr height="30px" id="tdParticipante01" class="tdparticipante">
 << conteúdo >>
 <tr height="30px" id="ddParticipante01" class="ddparticipante">

Alguém sabe o porque não funciona no IE?