Javascript Tabelle Zeile einblenden/ausblenden

Ich habe eine Tabelle erstellt mit Javascript/Backbone. Während der Verwendung einer Vorlage, um die Anzeige der Zeilen habe ich eine Zeile sichtbar und eine versteckt sich, von Anfang an. Wenn ich auf eine konkrete Tabelle möchte ich es auf 'erweitern', indem Sie zeigt die verborgenen Zeile unter der sichtbaren eins. Ich bin auch mit einer Schleife um die Tabelle zu erstellen, so dass alle Zeilen haben die gleiche Klasse und id. Bisher habe ich dieses auf-und Zuklappen der Zeilen:

expandRow: function() {
    if (document.getElementById('hiddenText').style.display == 'none' ) {
        document.getElementById('hiddenText').style.display = '';
    }
    else if (document.getElementById('hiddenText').style.display == '') {
        document.getElementById('hiddenText').style.display = 'none';
    }

Allerdings ist diese Lösung nur öffnet und schließt die gleiche Zeile in der Tabelle (oben), egal in welcher Zeile ich auf. Ich brauche Hilfe um eine Lösung zu finden, um nur erweitern/reduzieren der betreffenden Zeile anklicken.

Finden Sie diese eine stackoverflow.com/a/32474501/3583859

InformationsquelleAutor Mati Kowa | 2013-05-10

  1. 3

    IDs muss für die Seite eindeutig sein. Wenn Sie nicht die einzigen sind, dann ist dein JavaScript wählen Sie einfach das erste Ereignis, in diesem Fall die erste Zeile mit "hiddenText" als ID.

    Müssen Sie wählen Sie die gewünschte Zeile über irgendeine Art von Referenz. Also, vielleicht in der Schleife, die die Tabelle erstellt Sie können einen inkrementellen index in der Zeile ids, dann wählen Sie die entsprechende Zeile über die Methode.

    InformationsquelleAutor Jace

  2. 0

    Ich kenne nicht die Interna, wie Sie konstruiert haben, der Ansicht. Unter der Annahme, dass this.$el ist die Tabelle, die Sie interessiert sind unten ist der code, den ich schreiben würde,

    expandRow: function() {
    if (this.$el.find("tr:hidden").length) {
        this.$el.find("tr:hidden").attr("display","");
    }
    else{
        $.el.find("tr:not(:hidden)").hide();
    }

    Obigen code geschrieben ist mit vielen der Annahme, so wahrscheinlich kann es falsch sein. Aber das ist die Art, wie, die Sie sollten schreiben Sie Ihre Ansichten

    Danke für deine Antwort Deeptechtons! Ich habe versucht es zu implementieren, die Weise, die Sie beschrieben haben, aber ohne Glück. Könnten Sie vielleicht einen Blick auf den vollständigen javascript-code und zeigt mir den richtigen Weg gewusst wie: implementieren Sie Ihre Methode? Wenn ja, finden Sie die vollständige js hier: jsfiddle.net/6xtj5
    jsfiddle.net/6xtj5/3
    Weiß nicht, ob etwas falsch ist an meiner Seite durch die Fiddle nicht ausgeführt und die Ergebnisse in Js-Fehler

    InformationsquelleAutor Deeptechtons

  3. 0

    Dein script halt an das erste element mit dieser ID, da Sie nicht die einzigen sind. Sie müssen Ihre Schleife dynamisch erstellen eindeutige ID. Um dies zu erreichen, würde ich eine integer-Zähler variable (var counter) hängen Sie eine eindeutige Zahl an das Ende der ID. Ich würde dann ändern Sie die Bedingung für die if-Anweisung zu Holen, indem Sie der Klasse den Namen statt der ID (getElementsByClassName('RowExpand')), und speichern Sie Sie alle in eine variable (var hasClassRowExpand). Auf das onClick-Ereignis, können Sie einen Verweis auf die ID der Zeile, auf die Sie geklickt haben, und dann eine Schleife durch jedes element in hasClassRowExpand. Wenn Sie auf dem index, der das element mit der passenden ID, manipulieren Sie die Eigenschaft display basierend auf seinem aktuellen Zustand.

    InformationsquelleAutor Marcus Santodonato

  4. 0

    Verwende ich eine CSS-Klasse definition wie diese...

    .hiddenRowTrue { display:none; }
.hiddenRowFalse { display:table-row; }

    ... JQuery toggleClass spiegeln den Staat.

    InformationsquelleAutor Steve Hibbert

Schreibe einen Kommentar