Afficher l'élément ci-dessous ligne dans le tableau sur cliquez sur

Question

J'ai un tableau affichant des informations. Ce que je voudrais accomplir est de permettre à l'utilisateur de cliquer sur une rangée, et d'avoir la note liée à l'information dans cette rangée affichée au-dessous de cette rangée. J'essaie de le configurer pour que je puisse utiliser la fonctionnalité de transition CSS, donc il est hors de question de mettre la note dans une rangée cachée et absolument positionnée en dessous de la ligne info. La transition CSS n'agit pas sur le style position. Je l'ai configuré pour que la note soit dans un div. Lorsque l'utilisateur clique sur une ligne de la table, un événement onClick appelle une fonction Javascript qui rend le div visible. Maintenant, tout ce dont j'ai besoin est que le div s'aligne sous la ligne du tableau sélectionné.

Comment puis-je obtenir la hauteur et la position de la rangée de tables? Je pense que je pourrais utiliser cela pour positionner le div. Ou, y a-t-il une meilleure façon de faire cela?

Voici un exemple de ce que j'ai:

<style> 
    .emarNote{ 
       transition: all .3s linear; 
       -o-transition: all .3s linear; 
       -moz-transition: all .3s linear; 
       -webkit-transition: all .3s linear; 
      } 
</style> 

<script type="text/javascript"> 
    function showEmar(id) 
    { 
     if (document.getElementById("emarNote"+id).style.visibility == "hidden") 
     { 
      document.getElementById("emarNote"+id).style.visibility = 'visible'; 
      document.getElementById("emarNote"+id).style.opacity = 1; 
     } 
     else 
     { 
      document.getElementById("emarNote"+id).style.opacity = 0; 
      document.getElementById("emarNote"+id).style.visibility = 'hidden'; 
     } 
    } 
</script> 

<table> 
    <tr onClick="showEmar(1)"> 
     <td>Info</td> 
     <td>Info</td> 
    </tr> 
</table> 

<div id="emar1" class="emarNote" style="visibility:hidden; opacity:0; position:absolute;"> 
    note about info 
</div> 

Answer 1

1er téléchargement JQuery. faire quelque chose comme ci-dessous:

<style> 
    .emarNote{ background:#CCCCCC; }   
</style> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.emarNote').hide(); 
    $('tbody', '#myTable').click(function(event) { 
     tr_ID = $(event.target).parent().attr('id'); 
     $('#' + tr_ID + '-info').fadeToggle('slow'); 
    }); 
}); 
</script> 

<table id="myTable"> 
<tbody> 
    <tr id="row1"> 
     <td>Info</td> 
     <td>Info</td> 
    </tr> 
    <tr> 
    <td colspan="2" id="row1-info" class="emarNote">MORE INFO would be really cool and such</td> 
    </tr> 
    </tbody> 
</table> 

REMARQUE: Remplacer "fadeToggle" par "slideToggle" pour acheive un effet de glissement. En outre, je pense vraiment que vous devriez lire un peu sur JQuery pour bien comprendre la solution. Vous trouverez qu'il est en fait assez facile à comprendre une fois que vous obtenez les bases.