Code-Faltung für einen Bericht mit jquery implementieren
-
27-09-2019 - |
Frage
Ich versuche Tabellenzeilen mit + zusammenzubrechen oder zu erweitern und -. Zeichen in der ersten Spalte angezeigt, jquery mit
<script type="text/javascript">
$(document).ready(function() {
$("tr.header").click(function () {
$("tr.child", $(this).parent()).slideToggle("fast");
});
});
Ich versuche, diesen Code zu verwenden. Aber ich will das Kind der Eltern auf allein ich Anklicken umgeschaltet werden. Alle Ideen, wie es zu tun?
Beispiel-HTML
<table>
<tr class="header" >
<td>1 </td>
<td>line1</td>
</tr>
<tr class="child">
<td>2</td>
<td>line2</td>
</tr>
<tr class="child">
<td>3</td>
<td>line3</td>
</tr>
<tr class="header" >
<td>4 </td>
<td>line4</td>
</tr>
<tr class="child">
<td>5</td>
<td>line5</td>
</tr>
<tr class="child">
<td>6</td>
<td>line6</td>
</tr>
</table>
Edit: Ich versuche, ein Bild von + zu setzen oder - in der gleichen Zeile wie Linie 1, line4 und versuche, einen Griff in dem Java-Skript zwischen den beiden Bildern zu Schaltern zu erhalten. Kann etwas Hilfe mich auf das?
Edit 1: Kann ich den ganzen Baum zusammengebrochen, wenn das Dokument geladen wird. Ich bin Anfänger mit XQuery verwendet wird.
Lösung
(In Antwort-an den geänderten Code)
Es gibt zwei Möglichkeiten: Entweder Sie Code ändern, nur die Zeilen nach dem geklickten Header wechseln:
$("tr.header").click(function () {
$(this).nextUntil(".header").slideToggle("fast");
});
oder den ursprünglichen Code verwenden und die Abschnitte in TBODYs wickeln:
<table>
<tbody>
<tr class="header" >
<td>1 </td>
<td>line1</td>
</tr>
<tr class="child">
<td>2</td>
<td>line2</td>
</tr>
<tr class="child">
<td>3</td>
<td>line3</td>
</tr>
</tbody>
<tbody>
<tr class="header" >
<td>4 </td>
<td>line4</td>
</tr>
<tr class="child">
<td>5</td>
<td>line5</td>
</tr>
<tr class="child">
<td>6</td>
<td>line6</td>
</tr>
</tbody>
</table>
Andere Tipps
Werfen Sie einen Blick auf diese für den Einbau des Bildes Toggle:
JQuery Mit der nächsten Tabellenzeile finden
ich gliederte sie in den Code Umang geteilt und dies scheint zu Arbeit auf der Hin- und Herschalten Bild sowie die Zeilen darunter.
$ (document) .ready (function () {
// Dies wird aufrollen Reihen auf erster Seite zu laden $ ( "Tr.header"). NextUntil ( "header "). SlideToggle (" schnell", function () { }); // end slideToggle
// Dies wird Zusammenbruch Reihe erweitern und Umschalten + und - Bilder $ ( "Tr.header"). Klicken (function () {
$(this).nextUntil(".header").slideToggle("fast", function () {
}); //end slideToggle
if ( ( $(this).hasClass('hidden') ) ) {
$('img', this).attr("src", "plus.gif");
$('img', this).attr("alt", "Click to expand row");
} else {
$('img', this).attr("src", "minus.gif");
$('img', this).attr("alt", "Click to collapse row");
}
$(this).toggleClass('hidden');
$(this).parent().next().toggle();
}); // end Klick
}); // end document.ready
Hier ist die zugehörige HTML, aber Sie werden die HTML-Kommentare um den img-Tag entfernen müssen Ich poste ein tatsächliches Bild, weil das nur zu verhindern, dass Stackoverflow zu denken ist.
1 Linie 1 2 Zeile 2 3 line3 4 line4 5 line5 6 line6Ihr aktueller Code nicht zeigen / kollabiert das Kind der Elternzeile. In Ihrem Beispiel, bricht es die beiden untergeordneten Zeilen (data1, Daten2 & data3, data4)
Sind Sie versuchen, etwas anderes hier zu erreichen?
Umang