Wechsel von "display none" nach "display block" zerstört Tabellen-Layout

[Gunnar Bittersmann]

@@Enrico

var w,
    x = kategorien.length;

w brauchst du an der Stelle nicht, sondern nur in der Funktion aufrufen(). Die Variable sollte demzufolge in der Funktion lokal deklariert werden.

function aufrufen (nr)
{
   w = 0;

   for (; w < x; w++)

Seltsame Schreibweise. Üblich ist

function aufrufen(nr)
{
	for (var w = 0; w < x; w++)

oder wenn du die Variable vorher deklarieren willst:

function aufrufen(nr)
{
	var w;

	for (w = 0; w < x; w++)

In modernen Browsern mit dem Schlüsselwort let statt var.

      document.getElementById("liste" + kategorien[w][0].toUpperCase() + kategorien[w].substring(1))

Kannst du deine IDs statt in CamelCase nicht mit Bindestrich benennen? <tbody id="liste-heute"> usw.? Dann kannst du dir den ganzen umständlichen Kram sparen und hast einfach

		document.getElementById("liste-" + kategorien[w])

Ich verstecke zuerst alle tbodies aus ("display: none") und möchte nur den anzuzeigenden tbody sichtbar machen ("display: block").

Warum das denn? Durch die Schleife gehen und abfragen, ob der aktuelle Schleifenindex w gleich nr ist. Wenn ja, auf "block" setzen, andernfalls auf "" (siehe andere Antwort):

function aufrufen(nr)
{
	for (var w = 0; w < x; w++)
	{
		if (w == nr)
		{
			document.getElementById("liste-" + kategorien[w]).style.display = "block";
		}
		else
		{
			document.getElementById("liste-" + kategorien[w]).style.display = "";
		}
	}
}

oder kurz

function aufrufen(nr)
{
	for (var w = 0; w < x; w++)
	{
		document.getElementById("liste-" + kategorien[w]).style.display = (w == nr) ? "block" : "";
	}
}

---

Was mache ich falsch?

.style.display = "none"

Ich krame mal wieder den Cheatah raus:
„Was hingegen schwer ist, ist in die Köpfe der Menschen zu bringen, dass Layout-Informationen in den CSS-Code gehören, nicht in den JavaScript-Code. JavaScript ist wunderbar geeignet, die DOM-Objekte auf eine Weise zu verändern, die in CSS genutzt werden kann.“

Nun könnte jemand sagen: Das Anzeigen/Nicht-Anzeigen wäre keine „Layout-Information“. Dann hat das erst recht nichts im style-Objekt zu suchen.

Zum Nicht-Anzeigen gibt es das HTML-Attribut hidden. Dieses ist hier zu verwenden:

function aufrufen(nr)
{
	for (var w = 0; w < x; w++)
	{
		if (w == nr)
		{
			document.getElementById("liste-" + kategorien[w]).removeAttribute("hidden");
		}
		else
		{
			document.getElementById("liste-" + kategorien[w]).setAttribute("hidden", "");
		}
	}
}

Dann wäre das Problem mit dem flaschen Wert für die display-Eigenschaft gar nicht erst aufgetaucht.

LLAP 🖖