slideToggle Tabellenzeile mit Jquery

Question

Ich habe seit über einer Woche versucht, eine Tabellenzeile zu verschiebenToggle, wenn die Schaltfläche "Weitere Informationen" angeklickt wird, aber nichts scheint überhaupt zu funktionieren.

Ich bin neu in Jquery, also wenn jemand mir helfen kann, schieben Sie die 'more-info-1', 'more-info-2', 'more-info-3' tr Tags. Das Hauptproblem besteht darin, dass diese IDs dynamisch über PHP erstellt werden und ich nicht verstehe, wie sie in JQuery ausgewählt werden - etwa mit 'more-info-' oder so.

Ich möchte, dass es wie dieses Beispiel funktioniert: Here minus die iframes natürlich.

Der Benutzer wird auf die Schaltfläche "Weitere Informationen" klicken, und dann wird die "mehr Info" -Seite nach unten verschoben. Hier

ist die Seite Quelle: (Ich weiß nicht, wie HTML einfügen richtig auf Stack Overflow, gibt es eine spezielle Art und Weise, es zu tun - die Code-Taste funktioniert nicht richtig mit HTML)

html 

div id="output-listings" 

    div class="main-info" 

     table class="listings" 

      tbody 

        tr id="more-info-1" class="mi-1" 

         td 

         div id="more-1" class="more-information"/div 

         /td 

        /tr 

        tr id="main-info-1" 

         tdLeftlane News/td 

         tdwww.leftlanenews.com//td 

         tda id="link-1" class="more-info-link" href="#"More info/a/td 

        /tr 

        tr id="more-info-2" class="mi-2" 

         td 

         div id="more-2" class="more-information"/div 

         /td 

        /tr 

        tr id="main-info-2" 

         tdMotor Authority/td 

         tdwww.motorauthority.com/ /td 

         tda id="link-2" class="more-info-link" href="#"More info/a/td 

        /tr 

        tr id="more-info-3" class="mi-3" 

         td 

         div id="more-3" class="more-information"/div 

         /td 

        /tr 

        tr id="main-info-3" 

         tdAutoblog/td 

         tdhttp://www.autoblog.com//td 

         tda id="link-3" class="more-info-link" href="#"More info/a/td 

        /tr 

      /tbody 

     /table 

    /div 

/div!--end output-listings-- 

/html 

Ich würde die Hilfe sehr schätzen.

Answer 1

Aus einem schnellen Blick sieht es so aus, als ob Sie so etwas wollen.

$('#link-1').click(function(){ 
    $('#more-info-1').slideToggle() 
}) 

Sie können dieses Skript auch verallgemeinern, indem mit allen drei zu arbeiten, wie die Klassen eingerichtet werden, oder durch die innere Funktion der Anzahl des th Link zu analysieren hat, die angeklickt wird und Futtermittel, die in den inneren jQuery Aufruf :

$('.more-info-link').click(function(){ 
    var id = $(this).attr('id'); 
    var num = id.substr(id.length-1,1); 
    $('#more-info-'+num).slideToggle(); 
}) 

Answer 2

Um zu verhindern, dass die Trs sichtbar sind, fügen Sie style = 'display: none' hinzu.

Answer 3

Obwohl Craigs Antwort funktioniert, können Sie Ihren Code begrenzen und ermöglichen jquery alle Ihre TR-Elemente in einem gewissen Umfang zu greifen, und die ID-Parsing, als er vorgeschlagen, usw.

$(".listings tbody tr").each(function(index) { 
    // hide by default 
    $(this).css({'display': 'none'}); 


    // set the onclicks 
    $(this).click(function() { 
     // your dosomething can change your appearance 
     dosomething(the_id_you_parse_out); 
    }); 
}); 

Nicht sicher, ob das ist Arbeitscode, ich habe es einfach zusammengeworfen, damit Sie den Kern der Verwendung von jquery's selector bekommen.

Answer 4

Je nachdem, ob Sie Ihren Elementen eine bestimmte ID für einen anderen Zweck zuweisen müssen, können Sie dies tun, ohne dass Sie individuelle IDs angeben müssen.

In diesem Beispiel verstecken wir beim Laden zuerst alle tr, die die Klasse umschaltbar haben. Dann sagen wir jQuery, dass wir ein paar Ebenen hochspringen und den nächsten tr verstecken sollen - das macht das Aufrufen einer ID überflüssig.

Beispiel jQuery dafür:

$(document).ready(function(){ 

$("#tableToggle tr.toggleable").hide(); 

$("#tableToggle .tableToggleButton").click(function(){ 
    $(this).parent().parent().next('tr').slideToggle();             
}); 

}); 

Beispiel modifizierte Tabelle:

<table id="tableToggle"> 
<tbody> 
<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 1</div></td> 
</tr> 
<tr class="toggleable"> 
<td>Main info 1</td> 
</tr> 
</tbody> 
</table> 

Answer 5

Da jQuery-Code in der Regel nur ausgeführt, wenn das DOM bereit ist, werden Sie immer die, wenn auch nur die TR sehen für eine Millisekunde, bis Ihr js-Code es versteckt, wenn Sie CSS nicht zuerst verwenden, um es zu verstecken.

Also die meisten Beitragenden hier beantwortet wahrscheinlich Ihre Frage. Ich möchte nur hinzufügen, dass Sie die TRs zunächst mit CSS verstecken und dann mit JS den Rest erledigen können.

Eine gute Faustregel ist, dass Sie versuchen, Ihren "Standard" -Seitenaufruf nur mithilfe von CSS zu erhalten, und fügen Sie dann die Rich-Funktionalität mit dem Jquery-Code hinzu. Oder zumindest würde ich das tun.