[RESOLU][Javascript] Effet slidetoggle jquery dans un tableau

Marsh Posté le 08-08-2011 à 19:57:55

Bonjour à tous,
cela fait maintenant 2 jours que je me casse la tête avec cette libraire Javascript appelée Jquery, car j'aimerais beaucoup utiliser l'effet slidetoggle afin d'afficher une ligne cachée d'un tableau et aussi me servir un peux plus du javascript que je délaisse beaucoup pour le php.

Concrètement j'ai donc ma première ligne du tableau, divisée en 3 cellule avec des <td></td>, puis la suivante qui doit être masquée au chargement et montrée quand le visiteur clique sur la 3eme cellule du haut.

Jetez un coup d’œil ici pour mieux me comprendre.

J'ai donc l'effet recherché sur celui du haut fait avec du css mais il m'apporte trop de contrainte, j'ai besoin d'un tableau. Le problème est que dés que je met mon div dans le tableau, plus rien ne se passe.

voici le code de la partie du haut :

Code :

<script type="text/javascript">
$(document).ready(function(){
$('.enter').click(function(){
$(this).next('.content').slideToggle('slow');
});
});
</script>
</head>
<body>
<br /><br /><br />
<div class="enter">Click me !</div>
<div class="content" style="display: none;">
Ligne sensée<br />
etre masquée au chargement.<br />
</div>

Et voici celui que je veux faire marcher :

Code :

<script type="text/javascript">
$(document).ready(function(){
$('.enter2').click(function(){
$(this).next('.content2').slideToggle('slow');
});
});
</script>
</head>
<body>
<table border="1" width="500">
<tr>
<td><a href="http://google.fr/">Google.fr</a></td>
<td>Le 08/08/2011</td>
<div class="enter2">
<td>+ (cellule qui montre le dessous au clic)</td>
</div>
</tr>
<div class="content2" style="display: none;">
<tr>
<td colspan="3">
Ligne sensée<br />
etre masquée au chargement.<br />
</td>
<tr>
</div>
</table>

Honnêtement j'y ai passé des heures et des heures mais même avec toutes les pages qui expliquent comment faire, je n'arrive jamais a utiliser l'effet sur un tableau, je vous demande donc un peu d'aide

Merci d'avance !

Message édité par spaik21 le 10-08-2011 à 23:02:18

Reply

Marsh Posté le 08-08-2011 à 19:57:55

Reply

Marsh Posté le 09-08-2011 à 17:05:58

Tu peux jeter un oeil sur un de mes tutos à la page
http://www.patrickcleder.com/tuto_31.php en espérant que cela t'inspire.
Cordialement.

Reply

Marsh Posté le 10-08-2011 à 15:43:20

Merci, je vais y jeter un oeil

Reply

Marsh Posté le 10-08-2011 à 22:17:06

Ce genre d'animation ne fonctionne pas sur des lignes de tableau.
Mais bien fadeIn/fadeOut qui respecte le display du tr.
http://stackoverflow.com/questions [...] -table-row

Sinon, dans une table, tu ne peux pas mettre de div autre part que dans un td, et donc en ayant une table "valide", il faut remonter d'un niveau dans le dom pour trouver la partie à montrer.

Code :

$(document).ready(function() {
     var hideEl=function() {
        $(".content" ).hide();
        $(".enter2" ).bind('click', function() {
           var target=$(this).parent().next();
           target.fadeIn("slow" );
         });
     };
hideEl();
});

Code :

<table border="1" width="500" cellspacing="0" cellpadding="0"> 
        <tr> 
            <td><a href="http://google.fr/">Google.fr</a></td> 
            <td>Le 08/08/2011</td> 
            <td class="enter2">+</td> 
        </tr> 
        <tr class="content"> 
            <td colspan="3"> 
                <p>Lorem ipsum dolor sit amet</p>             
            </td> 
        </tr> 
    </table>

Reply

Marsh Posté le 10-08-2011 à 22:54:46

ok je te remercie j'ai testé ca mais je prefere l'effet du slidetoggle du coup me suis fait ch*** a simuler un tableau en css et ca donne le resultat que je voulais... mais vu que je galere en css et en javascript .
voila en gros le resultat :

http://fundev21.free.fr/test/show.php
sauf que maintenant j'ai plusieurs ligne et a chacune d'elle on peut en derouler une en plus.

Reply

Marsh Posté le 30-01-2012 à 20:52:24

Repenché dessus, et trouvé dans un tableau...

Code :

<script charset="utf-8" src="http://code.jquery.com/jquery-1.7b1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tableToggle tr.toggleable" ).hide();
$("#tableToggle .tableToggleButton" ).click(function(){
$(this).parent().parent().next('tr').slideToggle('medium');
});
});
</script>
<br />
<table id="tableToggle">
<tr>
<td><div class="tableToggleButton">More info 1</div></td>
</tr>
<tr class="toggleable">
<td>Main info 1</td>
</tr>
<tr>
<td><div class="tableToggleButton">More info 2</div></td>
</tr>
<tr class="toggleable">
<td>Main info 2</td>
</tr>
</table>

Message édité par spaik21 le 30-01-2012 à 20:52:49

Reply

[RESOLU][Javascript] Effet slidetoggle jquery dans un tableau

Sujets relatifs:

Leave a Replay