[Resolvido] Usando javascript para loops criados dinamicamente co

[beto.corujao 0]

Bom galera, to com uma dúvida que até agora não conseguir resolver.

 

Tenho uma tabela que possui um loop e nela recebo os dados vindos do banco de dados. Como ela é um pouco extensa, queria que as opções de "Visualizar", "Editar" e "Excluir" fossem exibidos somente quando o usuário passa-se o mouse sobre a linha da tabela (sobre o elemento HTML td).

 

Sei que pra isso tenho de usar os eventos onMouseOver e onMouseOut (ou mouseover e mouseout no caso do jquery), só que como não há como saber a quantidade de

dados previamente, não consigo pegar a id com o getElementById pois ele é único para cada elemento.

 

Alguma ajuda por favor...

 

 

vejam o código abaixo:

 

<?php
   $i = 1;
   foreach($res_exig as $key){ // dados do banco
?>
         <tr <?php echo ($i%2 != 0)? 'style="background: #e4f0f8;"' : 'style="background: #FFF;"'; ?>>
           	<td scope="row" class="firstcol" >
               	<strong>
                           <a href="#">CONVOCAÇÃO</a>       
                       </strong>

                   <div class="actions" id="<?php echo $i; ?>" ><!-- opções a serem exibidas quando o usuário passar o mouse sobre a td -->

                   	<span><a href="#"><img src="images/ver.png" alt="[Visualizar]" title="Visualizar" class="img_tab" /></a> </span>
                   	<span><a href="#"><img src="images/alterar.png" alt="[Editar]"  title="Editar"  class="img_tab" /></a></span>
                   	<span><a href="#"><img src="images/analisar.png" alt="[Análise]"  title="Analisar" class="img_tab" /></a></span>
                   	<span><a href="#"><img src="images/excluir.png" alt="[Excluir]"  title="Excluir" class="img_tab" /></a></span>
                   </div>
               </td>
               <td scope="row" class="rows_oficio"><a href="#"> $key['num_oficio']</a></td>
               <td scope="row" class="rows_oficio"><a href="#"> $funcoes->get_value($key['dt_exigencia'])->date_convert()->get(); </a> </td>
               <td scope="row" class="rows_oficio"><a href="#"> $funcoes->get_value($key['orgaolocal'])->format('ol')->get(); </a> </td>
               <td scope="row" class="rows_oficio"><a href="#"> $key['cadastrador'] </a> </td>
               <td scope="row" class="rows_oficio"><a href="#"> $key['status'] </a> </td>
           </tr>

<?php  ++$i;} ?>

[Henrique Barcelos 290]

Cara, os dados vindos do banco provavelmente possuem um índice primário único [iD].

 

O que você pode fazer é usar usar o link para guardar esse ID e ao invés de tentar acessar com getElementById, usar getElementsByClassName.

 

...

$id = $key['CAMPO PRIMÁRIO ÚNICO'];

...

<span><a href="visualizar.php?id={$id}"><img src="images/ver.png" alt="[Visualizar]" title="Visualizar" class="img_tab" /></a> </span>
<span><a href="editar.php?id={$id}"><img src="images/alterar.png" alt="[Editar]"  title="Editar"  class="img_tab" /></a></span>
<span><a href="analisar.php?id={$id}"><img src="images/analisar.png" alt="[Análise]"  title="Analisar" class="img_tab" /></a></span>
<span><a href="excluir.php?id={$id}"><img src="images/excluir.png" alt="[Excluir]"  title="Excluir" class="img_tab" /></a></span>

 

Aí você sabe qual registro está tratando...

[beto.corujao 0]

Na verdade isto que você falou já está implementado.

 

O que eu realmente queria é um efeito ao passar o mouse que exibisse essas opções da mesma forma que é feito nos comentários do youtube por exemplo (exibe as opções Voto Positivo, Voto Negativo e Responder).

 

Alguma idéia?

[beto.corujao 0]

Encontrei uma solução bem simples utilizando CSS para o que eu queria:

 

Na linha (<td>) onde está o loop basta incluir na class CSS .linha-dinamica, que funciona assim:

 

<style type="text/css" media="screen">


   .linha-dinamica{visibility:hidden;padding:2px 0 0;}
   tr:hover .linha-dinamica{visibility:visible;}


</style>