2016-08-10 5 views
0

Ich versuche, bestimmte Zeilen einer Tabelle anzuzeigen und auszublenden, die angezeigt oder ausgeblendet werden, wenn die Verwendung auf einen Link klickt, aber meine Versuche sind nicht ganz da. Kann mir jemand sagen, wo ich falsch liege?Anzeigen und Ausblenden bestimmter Zeilen in der Tabelle mit Javascript

Erstens, hier einige Beispiel-HTML für die Tabelle, die von PHP und einer sqlsrv Verbindung tatsächlich erzeugt wird:

Wie Sie sehen können, ist Javascript um die Zeilen in der zweiten Reihe zu verbergen/zeigen genannt. Dies würde alle Empfängerzeilen für diese Datei anzeigen (sowie die untergeordneten Header). Ich habe nur die showRows JS jetzt geschrieben, da ich nicht in der Lage gewesen, immer arbeiten richtig, jedoch würden die hideRows JS effektiv das Gegenteil der Fall sein:

function showRows(FileSpan) { 
     var rows = document.getElementsByClassName(FileSpan); 
     var arr = new Array(); 

     for (i = 0; i < rows.length; i++) { 
      rows[i].style.display = 'block'; 
     } 

    } 

Dies ist jedoch nicht zu einer wie ich möchte, dass der Tisch aussieht. Anstatt die Zeile anzuzeigen, werden alle angezeigten Zeilen in eine einzelne Zelle unterhalb der aktuellen Zeile eingefügt. Wo gehe ich falsch?

Ich habe ein paar Bilder hinzugefügt, damit Sie sehen können, wie ich aussehen möchte und wie es funktioniert.

Starting Displayed

Resulting Display on Click

+0

Versuchen Sie, 'i' in eine lokale Variable zu ändern. – gcampbell

+0

Sie können die Tabelle HTML hier finden: http://maat.hopto.org/share/sampletablemtml.txt Und wie ich möchte die Tabelle aussehen: http://i.stack.imgur.com/z5mZK. png – Larnu

Antwort

3

Sie müssen nur die block-table-rowdisplay Eigenschaft ändern.

rows[i].style.display = 'table-row'; 
+1

Ha, so einfach wie das !!! Vielen Dank für Ihre Hilfe :) – Larnu

Verwandte Themen