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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [RESOLU][Javascript] Effet slidetoggle jquery dans un tableau

spaik21

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

Publicité

pcleder

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.

spaik21

Merci, je vais y jeter un oeil

David Boring

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>

spaik21

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.

spaik21

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

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Lire les propriétés des objets d'un tableau	passage d'un tableau html en un tableau js
[PHP] Question de n00b : comment ça coexiste le PHP et le JavaScript ?	problème sur tableau C++
algorithme pour trier un tableau	[AJAX-JavaScript]Requete Ajax retournant un 403
[Résolu] [debutant] aide javascript	[jquery] Rules : Valeur Max d'un champs en rapport avec un autre champ
Intégration tableau et bouton paypal	pb récupération des données dans un tableau et leur affichage
Plus de sujets relatifs à : [RESOLU][Javascript] Effet slidetoggle jquery dans un tableau

Page générée en 0.109 secondes