Salut, est-ce qu'il existe un moyen de dire "après tel élément, rajouter un autre élément?"

par exemple, quand je clique sur un ligne de tableau (normalTr), je voudrais ajouter une nouvelle ligne au tableau :

$(".normalTr").live('click', function(){
            $(this).append("<tr class='subTr'></tr>")
        })

le append me l'ajoute dedans, et le next ou sibling pointe vers un élément déjà existant... donc je me demandais s'il était possible de lui dire "après l'élément qui a pour class 'normalTr' et qui vient d'être cliqué, rajouter une ligne. Savez-vous comment faire?

Merci de votre aide

.insertAfter()

Salut, ah ouai bien vu, par contre quand je clique sur une ligne du tableau, elle s'efface...!

voilà mon code : je récupère les données de la bdd dans le tableau (je met la classe normalTr dans la boucle while) :

$contenu_s = '<table class="tableau">
   <tr>
       <td>image</td>
       <td>titre</td>
        <td>texte</td>
   </tr>';

while ($donnees2 = $req2->fetch()){
    $contenu_s .= '<tr class="normalTr">
       <td><a href="index.php?id='.$donnees2['id'].'"><img src="'.$donnees2['image'].'" title="'.$donnees2['id'].'"/></a></td>
       <td><a href="index.php?id='.$donnees2['id'].'"> '.stripslashes(htmlspecialchars($donnees2['nom'])).'</a></td>

et voilà mon code javascript :

$(".normalTr").live('click', function(){
            $(this).insertAfter("<tr class='subTr'>BLABLA</tr>")
        });

je n'ai pas le BLABLA ni quoique ce soit, en fait la ligne s'efface tout simplement en cliquant dessus... sais-tu pourquoi?

C'est soit :

$(".normalTr").live('click', function(){
    $(this).after("<tr class='subTr'>BLABLA</tr>");
});

soit

$(".normalTr").live('click', function(){
    $("<tr class='subTr'>BLABLA</tr>").insertAfter(this);
});

La documentation de jQuery existe pour être lue... pas juste pour la décoration.

en effet, génial merci !
si on veut mettre un effet de slideDown là-dessus, savez-vous pourquoi mon code ne m'affiche pas l'effet? j'ai bien la ligne, mais qui arrive d'un coup :

$(".normalTr").live('click', function(){
var tableau= "<tr class='subTr'>BLAQDSqsdfsdFBLA \n\
             <td>photo</td><td>photo</td><td>photo</td>";
$(this).after(tableau).slideDown();
});

Essaye $(this).after(tableau).hide().slideDown();

salut, merci, non ça me fait pas l'effet, ça affiche la nouvelle ligne puis la ligne sur laquelle j'avais cliqué se met à trembler quelques millisecondes, et plus rien

edit : en fait, pour préciser, j'aimerais faire le même effet que sur ce site : quand on clique sur une ligne du tableau, une nouvelle ligne apparaît, et si on reclique dessus elle repart en slideToggle :

http://television.telerama.fr/tele/grille.php

Je crois que les slide sur les tr, c'est la loose.

Je pense aussi.

lol, mais vous avez une idée?

Tu veux faire comme Telerama ? Alors utilise des <div>, et non pas un <table>.

ok merci

Salut,
j'ai un petit soucis avec mon effet : j'aimerais que si je clique sur "la même" ligne (qui s'est ouverte la première fois), alors la ligne fait un simple slideUp, et non pas qu'elle se ré-ouvre comme si c'était une autre ligne du tableau (si on clique sur n'importe quelle ligne, d'abord les lignes ouvertes se ferment, puis la ligne en question s'ouvre) :

Pour ça, j'ai essayé de préciser que la "même ligne" c'était celle en e.target, mais le code ne fonctionne pas, si je reclique sur la même ligne, elle fait un slide up-slideDown à la suite. Il y a surement une meilleure façon d'écrire ça je pense : ligne 8 :

if (e.target != $(this) ){

$(function () {
    $(".normalTd").bind('click', function(e){
        //si déjà ouvert
        if ($(".tdNouvelle").length) {
            $(".tdNouvelle").slideUp();
        }

        if (e.target != $(this) ){
            var maVar = $('<div class="tdNouvelle">nouvelle</div>').insertAfter(this).hide();
            maVar.slideDown();
        }
    });

donc si on clique sur une autre ligne, toutes les lignes déjà ouvertes se mettent en slideUp et la ligne cliquée fait en slideDown, mais si je re-clique sur la même ligne (ouverte), j'aimerais qu'elle fasse un simple slideUp. Savez-vous comment je pourrais faire?

voilà le html :

<div id="tableau">

    <div class="normalTr">
       <div class="normalTd">img</div>
       <div class="normalTd">titre</div>
       <div class="normalTd">texte</div>
   </div>

     <div class="normalTr">
       <div class="normalTd">img</div>
       <div class="normalTd">titre</div>
       <div class="normalTd">texte</div>
   </div>

            </div>

Une petite idée?