JavaScript: nur die ersten paar Zeilen einer HTML-Tabelle anzeigen (den Rest zunächst ausblenden)

Question

Hallo,

eigentlich steht schon alles in der Überschrift.

In einer klassischen HTML-Tabelle sollen nur die ersten 4 Zeilen standardmäßig angezeigt werden. Die restlichen Zeilen sollen erst bei einem Klick auf "mehr anzeigen" erscheinen.

Eine Schwierigkeit noch: die Tabelle wird von einem CMS generiert. Ich kann daher nicht einfach spezielle Klassen für die ersten 4 Zeilen vergeben.

Ich vermute, dass eine Schleife benötigt wird, komme aber mit meinen begrenzten Kenntnissen nicht weiter.

Bin für jeden Tipp dankbar.

Gruß JürgenErWürgen ;)

Answer 1

folgende möglichkeiten:
- ganze tabelle anzeigen, bei "onload" die ungewünschten ausblenden
- keine zeile anzeigen, bei "onload" die ersten vier anzeigen

ich empfehle die zweite möglichkeit.
ich nehme an, du hast einfluss auf das cms und kannst (wenn auch nicht für die ersten vier) für alle zeilen eine klasse/eigenschaft angeben.
also zb alle zeilen erhalten eine klasse "dontdisplay" oder so, bei onload werden die entsprechenden klassen entfernt.

Je nachdem inwiefern du das CMS beeinflussen kannst, bestünde die möglichkeit, die ganze tabelle als javascript array zu übergeben und dynamisch zu erzeugen.
optional könnte man zusätzlich die ersten vier zeilen auch in html schreiben (falls es sinn mach, dass man diese auch ohne javascript sieht).

...komme aber mit meinen begrenzten Kenntnissen nicht weiter.

wie weit kommst du denn?
Die "beste" Umsetzung hängt stark von vielen anderen bedingungen ab.

Answer 2

generell zuerst immer alles anzeigen, sonst ist bei deaktiviertem JavaScript die Seite unbenutzbar!

die Zeilen einer Tabelle erhältst du über das Array rows, darin die Nrn. 0-3 anzeigen lassen, den Rest nach onload verschwinden lassen:

window.onload=function() {
var tabelle=document.getElementsById("dietabelle");
if (tabelle) {
var zeilen=tabelle.rows;
for (var i=4;i<zeilen.length;i++) {
zeilen[i].style.display="none";
}
}
}

Klassen etc sind unnötig, nur ein Zugriff auf das Tabellenelement (hier über die ID, aber anderes ist denkbar)