Zu- und Aufklappen in HTML-Tabellen

WS GmbH

Obwohl die Ausgaben des WS-Reporters bewusst einfach, als HTML-Tabellen, implementiert sind, wird ein einfacher Mechanismus zum Zu- und Aufklappen in den Tabellen benötigt. Dazu wurde ein Javascript-Tool entwickelt, das sich auf jede HTML-Tabelle anwenden lässt und hier auch separat veröffentlicht wird.

Der TableFolder ergänzt TH-Elemente im Body-Teil (<TBODY>) einer HTML-Tabelle, wenn sie mehrere Zeilen umfassen (d.h. ROWSPAN > 1) um einen Pfeil, über den der jeweilige Teil der Tabelle zu- und ausgeklappt werden kann. Dabei bleibt im WS-Reporter die letzte Zeile als Summen-Zeile stehen. Es kann aber auch die erste Zeile stehen bleiben.

Beispiel aus dem WS-Reporter

TM02 Übersicht Produkte

Produktbereich Produktgruppe Produkt Bruttoertrag Kosten Nettoertrag
Kredit Dispo Dispo-Prod. 0 1.916 1.092 824
Dispo-Prod. 1 1.799 1.064 735
Dispo-Prod. 2 1.597 903 694
Dispo-Prod. 3 1.747 985 762
Dispo-Prod. 4 1.622 918 704
Insgesamt 8.681 4.962 3.719
Darlehen Darlehen-Prod. 0 1.690 937 752
Darlehen-Prod. 1 1.692 945 746
Darlehen-Prod. 2 1.537 837 700
Insgesamt 4.918 2.720 2.198
sonstige Kredite sonstige Kredite-Prod. 0 1.754 1.003 751
sonstige Kredite-Prod. 1 1.717 960 757
sonstige Kredite-Prod. 2 1.761 992 769
sonstige Kredite-Prod. 3 1.654 929 726
sonstige Kredite-Prod. 4 1.755 961 794
Insgesamt 8.641 4.845 3.796
Insgesamt 22.241 12.527 9.714
Anlagen kurzfristige Anlagen kurzfristige Anlagen-Prod. 0 1.755 974 781
kurzfristige Anlagen-Prod. 1 1.760 975 785
kurzfristige Anlagen-Prod. 2 1.728 969 759
kurzfristige Anlagen-Prod. 3 1.600 907 693
kurzfristige Anlagen-Prod. 4 1.715 993 722
kurzfristige Anlagen-Prod. 5 1.709 981 728
Insgesamt 10.267 5.800 4.468
langfristige Anlagen langfristige Anlagen-Prod. 0 1.761 980 781
langfristige Anlagen-Prod. 1 1.546 866 680
langfristige Anlagen-Prod. 2 1.675 960 714
langfristige Anlagen-Prod. 3 1.719 977 741
langfristige Anlagen-Prod. 4 1.653 939 714
langfristige Anlagen-Prod. 5 1.716 987 729
Insgesamt 10.070 5.710 4.360
Insgesamt 20.337 11.510 8.827
Zahlungsverkehr Inland Inland-Prod. 0 1.727 1.232 494
Inland-Prod. 1 1.592 1.128 464
Inland-Prod. 2 1.728 1.269 459
Inland-Prod. 3 1.882 1.369 514
Insgesamt 6.929 4.998 1.931
Ausland Ausland-Prod. 0 1.806 1.268 538
Ausland-Prod. 1 1.736 1.250 486
Ausland-Prod. 2 1.805 1.298 506
Ausland-Prod. 3 1.898 1.381 517
Insgesamt 7.245 5.197 2.048
sonstige sonstige-Prod. 0 1.503 1.097 406
sonstige-Prod. 1 1.824 1.309 515
sonstige-Prod. 2 1.774 1.294 480
sonstige-Prod. 3 1.676 1.204 472
sonstige-Prod. 4 1.636 1.182 454
Insgesamt 8.412 6.085 2.327
Insgesamt 22.586 16.281 6.306
Investments Börsengeschäfte Börsengeschäfte-Prod. 0 1.482 829 653
Börsengeschäfte-Prod. 1 1.462 826 636
Börsengeschäfte-Prod. 2 1.493 852 641
Börsengeschäfte-Prod. 3 1.472 817 655
Börsengeschäfte-Prod. 4 1.362 779 583
Börsengeschäfte-Prod. 5 1.400 812 588
Insgesamt 8.671 4.915 3.757
Fonds Fonds-Prod. 0 1.632 932 700
Fonds-Prod. 1 1.498 835 663
Fonds-Prod. 2 1.489 844 645
Fonds-Prod. 3 1.546 870 676
Fonds-Prod. 4 1.573 910 664
Insgesamt 7.738 4.391 3.348
Derivate Derivate-Prod. 0 1.545 863 683
Derivate-Prod. 1 1.342 773 569
Derivate-Prod. 2 1.378 789 589
Derivate-Prod. 3 1.564 903 661
Derivate-Prod. 4 1.423 785 638
Derivate-Prod. 5 1.489 851 638
Insgesamt 8.741 4.964 3.777
Insgesamt 25.151 14.269 10.882
Sonstiges sonstige Anlagen sonstige Anlagen-Prod. 0 3.028 1.701 1.327
sonstige Anlagen-Prod. 1 3.416 1.926 1.491
sonstige Anlagen-Prod. 2 3.362 1.910 1.453
sonstige Anlagen-Prod. 3 3.327 1.886 1.441
Insgesamt 13.133 7.422 5.711
Sonst. 1 Sonst. 1-Prod. 0 1.820 1.049 772
Sonst. 1-Prod. 1 1.766 999 767
Sonst. 1-Prod. 2 1.845 1.062 783
Sonst. 1-Prod. 3 1.571 870 700
Sonst. 1-Prod. 4 1.806 1.037 769
Sonst. 1-Prod. 5 1.594 904 690
Insgesamt 10.402 5.922 4.480
Sonst. 2 Sonst. 2-Prod. 0 994 556 438
Sonst. 2-Prod. 1 1.172 677 496
Sonst. 2-Prod. 2 1.034 591 443
Insgesamt 3.201 1.824 1.377
Sonst. 3 Sonst. 3-Prod. 0 1.709 941 768
Sonst. 3-Prod. 1 1.757 1.009 747
Sonst. 3-Prod. 2 1.674 947 728
Insgesamt 5.140 2.897 2.243
Insgesamt 31.876 18.064 13.811
Insgesamt 122.191 72.651 49.540
Geldangaben in Tsd.€



Beispiel mit fest stehender Überschrift
Beispieltabelle
 Fixierte SpaltenInhalt
AufgabenTasks Beschreibunggeplanter
Aufwand
 Projektinitialisierung
Auftrag klärenAbstimmung mit
Auftraggeber
Meetings und Telefonate 10
Leistungsbeschreibung
erstellen
Dokument erstellen und abstimmen 20
Leistungsbeschreibung
abnehmen
ein abschließendes Meeting geplant 1
RessourcenAufwandsschätzung Business Analyst und Projektleiter 10
Budget Merkposten für Bereitstellung
Personal Bewerbergespräche und Contracting 5
Beistelleistungen Beistelleistungen beauftragen 3
 Zwischensummen 49
 Projekt
EntwicklungDesign Module konzipieren 10
Datenmodellierung Modellierung und Dokumentation in XDWH 10
Datenbank Datenbank aufbauen 1
Backend Backend in PHP, Transaktionen implementieren 30
Frontend CSS allgemein verwendete CSS-Styles 5
Frontend HTML-Seiten, JavaScript-Steuerung im Frontend 30
Test und AbnahmeTestfälle Testfälle definieren und erfassen 10
Testen Testfälle ausführen, ggf. Retest 30
Bugfixing Aufwand für Fehlerbeseitigung 30
 Zwischensummen 156
 Einführung
InstallationDatenbank Datenbank in Produktion installieren und Daten laden 2
Anwendung Anwendung installieren 2
SchulungenUnterlagen Schulungsunterlagen erstellen 10
Schulungen 2 * 3 Kurstage vor Ort durchführen 6
 Zwischensummen 20
 Summen (fixierte Fußzeile) 225


Im einfachsten Fall funktioniert das nach der Instanziierung des Objekts automatisch für alle in Frage kommenden TH-Elemente. Es kann aber auch (wie hier) differenziert für jedes TH-Element angegeben werden, ob und wie der Mechanismus funktionieren soll. Dazu müssen diese Elemente die Klasse WSFSummen oder WSFHeader erhalten. In den Spalten-Überschriften (<THEAD>) kann das Auf- und Zuklappen auch für ganze Spalten ermöglicht werden.

Die dazu erforderliche JavaScript-Klasse und ein Muster für dazu passende CSS-Regeln erhalten Sie hier: TableFolder.

[an error occurred while processing this directive]