Tabelle: Mehrere Zeilen aus einmal einbleden und wieder ausblenden - Wie?

EPMS · #1 (**permalink**) 15.07.2009, 09:47

Hallo Zusammen,
ich habe hier eine Tabelle bei der ich mit Klick auf einen Link mehrere versteckte Zeilen einblenden möchte. Bei einem weiteren Klick sollen die Zeilen wieder ausgeblendet werden.
Momentan habe ich schon folgendes:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
 <script language="JavaScript">
<!--
 function showHiddenRows(Zahl)
  {
  document.getElementById('zeile_x').style.display = '';
  }
//-->
</script> 
  </head>
  <body>

<table cellspacing="0">
<caption >Testtabelle</caption>
<tr>
      <td>Anzeigen.</td>
      <td>Anzeigen.</td>
</tr>
<tr>
      <td>Anzeigen.</td>
      <td>Anzeigen.</td>
</tr>
<tr style="display: none;"  id="zeile_x">
      <td>Nicht gleich Anzeigen.</td>
      <td>Nicht gleich Anzeigen.</td>
</tr>
<tr>
      <td>Anzeigen.</td>
      <td>Anzeigen.</td>
</tr>
<tr style="display: none;"  id="zeile_x">
      <td>Nicht gleich Anzeigen.</td>
      <td>Nicht gleich Anzeigen.</td>
</tr>
</table>
  
<a href="#" title="Weitere Informationen anzeigen" onclick="showHiddenRows(); return false;">Weitere Informationen anzeigen</a>
  </body>
</html>

Das funktioniert soweit auch. Leider wird bei Klick auf den Link nur die erste versteckte Zeile eingeblendet. Was muss ich machen, damit mehrere Zeilen auf einmal eingeblendet werden?

Und, wie kann ich es realisieren, dass bei einem weiteren Klick die Zeilen wieder verschwinden. Bin in der Materie leider noch ein Anfänger.

Danke im voraus.

protonenbeschleuniger · #2 (**permalink**) 15.07.2009, 10:25

IDs müssen einmalig sein, das das funktioniert ist ungewöhnlich. In welchen Browser testest du?

Einfacher ist es, wenn du der Tabelle eine ID gibst und dann die Reihen mit rows ausblendest.

Code:

function showHiddenRows(){
	var t = document.getElementById('table');
	var display = t.rows[2].style.display == '' ? 'none' : '';
	t.rows[2].style.display = t.rows[4].style.display = display;
}

EPMS · #3 (**permalink**) 15.07.2009, 10:40

Ich nutze Firefox. So wie du geschrieben hast, funktioniert es. Leider habe ich dann noch ein Problem. Das von mir war nur eine Testtabelle.

Später habe ich eine Tabelle, wo die Zeilen zum einblenden und ausblenden nicht immer an der gleichen Stelle stehen. Dann kommt noch hinzu, dass es am Ende 9 Zeilen sind zum ein- und ausblenden.

protonenbeschleuniger · #4 (**permalink**) 15.07.2009, 11:40

Was soll ich dir darauf antworten? Du musst dir dann die entsprechende Logik programmieren

EPMS · #5 (**permalink**) 15.07.2009, 11:46

Ok. Werde ich mal versuchen. Was bewirkt denn diese Zeile:

Code:

t.rows[2].style.display = t.rows[4].style.display = display;

protonenbeschleuniger · #6 (**permalink**) 15.07.2009, 11:56

Das das Attribut der Zeile 3 und 5 mit dem Wert in display gesetzt wird.

EPMS · #7 (**permalink**) 15.07.2009, 13:29

Ok. Danke. Kannst mir auch noch sagen, was folgendes macht:

Zitat:

var display = t.rows[2].style.display == '' ? 'none' : '';

Die erste Zeile verstehe ich.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Zeilen aus HTMLtabelle ausblenden	X4R5L	Javascript & Ajax	7	29.11.2007 19:57
Zeilen in Tabelle löschen	MTH	Javascript & Ajax	0	11.09.2007 13:08
Unterschiedlich eingefärbte Zeilen einer Tabelle	Gawan	CSS	3	21.06.2007 16:34
Aus-/Einblenden von Zeilen in einer Tabelle mit JavaScript	brainstorm1984	Javascript & Ajax	3	02.02.2007 10:25
Tabelle Zeilen Problem	BubbelBubbel	CSS	5	25.03.2005 00:04