Einstürzende Tabelle mit html

Ich habe eine Tabelle, die ich will, um zu zeigen, benutzt, verfügbar, und insgesamt für die Lagerung für bestimmte Server. Jedoch, die Server über mehrere Festplatten und ich will die Standard-Ansicht zeigen, die Gesamtsummen für alle Lager für gebrauchte, für alle verfügbar, und das alles für insgesamt. Aber durch klicken auf die Zeile fällt es nach unten, um den Zusammenbruch. Ich werde alle Daten fließen in jede Zelle, aber ich bin mir nicht sicher, wie Sie tun das Tropfen nach unten (kollabieren sowie expandieren).

zB. Zusammenbruch Blick

HTML:

<table>
     <th></th><th>server 1</th><th>server 2</th>
     <tr><td>used</td><td>1gb</td><td>2gb</td></tr>
     <tr><td>available</td><td>1gb</td><td>2gb</td></tr>
     <tr><td>total</td><td>2gb</td><td>4gb</td></tr>
    </table>

zB. erweiterte Ansicht

HTML:

  <table>
     <th></th><th>server 1</th><th>server 2</th>
     <tr><td>used</td><td>1gb</td><td>2gb</td></tr>
     <tr><td>drive 1</td><td>0.5gb</td><td>1gb</td></tr>
     <tr><td>drive 2</td><td>0.5gb</td><td>1gb</td></tr>
     <tr><td>available</td><td>1gb</td><td>2gb</td></tr>
     <tr><td>drive 1</td><td>0.5gb</td><td>1gb</td></tr>
     <tr><td>drive 2</td><td>0.5gb</td><td>1gb</td></tr>
     <tr><td>total</td><td>2gb</td><td>4gb</td></tr>
    </table>

InformationsquelleAutor user1052448 | 2014-05-22
  1. 1

    JQuery verwenden, damit Ihre neue Jsfiddle(aktualisiert) : http://jsfiddle.net/5BRsy/3/

    Ersten Satz class und ids, so können Sie rufen Sie mit JS Hinweis: ich musste es tun für jeden TD denn es würde nicht lassen Sie mich div-oder span-und ausblenden.

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table2">
 <th></th><th>server 1</th><th>server 2</th>
 <tr><td class="btn">used</td><td>1gb</td><td>2gb</td></tr>
 <tr><td class="expand1">drive 1</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>
 <tr><td class="expand1">drive 2</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>

 <tr><td class="btn2">available</td><td>1gb</td><td>2gb</td></tr>
 <tr><td class="expand2">drive 1</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
 <tr><td class="expand2">drive 2</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
 <tr><td>total</td><td>2gb</td><td>4gb</td></tr>
</table>

    dann verwenden JS 

        $(document).ready(function(){
  $(".btn").click(function(){
    $(".expand1").toggle();
  });
      $(".btn2").click(function(){
    $(".expand2").toggle();
  });
})

    Sowie CSS Sie zu verstecken onload sonst könnten Sie sehen, die versteckten TDs

    .expand1 { display: none;
}

.expand2 { display: none;
}

    Für weitere Informationen besuchen Sie http://www.w3schools.com/jquery/jquery_hide_show.asp

    • Das wäre toll, aber ich vergaß zu erwähnen, dass ich nur die einzelne Kategorie zu erweitern, nicht alles. Das heißt, wenn ich auf die Zeile "Benutzt" - es erweitert einfach nur den verwendeten Bereich. Nicht Verfügbar als gut.
    • Lassen Sie mich update meine jsfiddle!
    • Genial! Dankbar für Ihre Hilfe. Können wir nicht verwenden eine input-Taste, sondern klicken Sie einfach auf die Zeile?
    • Aktualisiert!Wenn dies die Antwort auf Sie Frage, markieren Sie es als gelöst(Nur ankreuzen der Antwort)!
    • Funktioniert Super! Gibt es trotzdem zu verwenden -/+) neben dem Verwendet, zu zeigen, erweitert/reduziert?
    • Ja,sorry für die verspätete Antwort-hier eine aktualisierte JSFiddle : "jsfiddle.net/5BRsy/5 ", Damit ich entfernt die Klassen aus den td ' s Hinzugefügt und 2 span jede td eine für die plus-Bild-und eine für die minus.Damit das Bild angezeigt wird, ändern Sie den "path to image" in der CSS, um Ihre Bilder-Pfad und löschen Sie die "Hintergrundfarbe" denken Sie daran, wenn Sie Bild ist zu groß Sie können die Größe id .imagesclass { resize:both; width:14px;[Höhe in Pixeln(Beispiel)]} auch ich habe die Java-hoffentlich kann man Sie verstehen. 😀

    InformationsquelleAutor 21CmOfPain
  2. -1

    Einer javascript-Funktion wäre toll für diese. Nur Klassen hinzufügen, um die Zeilen-Antrieb 1/2 und ID ' s für jeden server und dann könnten Sie tun, ein .und zeigen .ausblenden, wenn Zeilen geklickt.

    InformationsquelleAutor Anindya Basu
  3. -1

    Gibt es ein paar Optionen. Sie können mit diesem kleinen jQuery-plug-in: http://sylvain-hamel.github.io/simple-expand/

    Oder Sie können Gebrauch machen von Accordion von jQuery http://jqueryui.com/accordion/

    InformationsquelleAutor TheBokiya
Schreibe einen Kommentar