✔ Zeilen en-bloc ein/ausblenden

ManicMarble

ManicMarble

Erfahrenes Mitglied
Guten Abend,
ich würde gerne per JS einen ganzen Block von Tabellenzeilen auf einen Schlag ein- oder ausblenden. Ein Beispiel-Skript sag mehr als 1000 Worte:
HTML: 
<script language="JavaScript" type="text/javascript">
	function showHide(id) {
		var dasDiv = document.getElementById(id);
		if (dasDiv.style.display == 'block') {
			dasDiv.style.display = 'none';
		} else {
			dasDiv.style.display = 'block';
		}
	}
</script>

<a href="javascript:void showHide('xy');">
	Ein-/Ausblenden
</a>

<table>
	<tr>
		<td>Hallo</td>
		<td>Welt</td>
	</tr>
	
	<div id="xy" style="display:block"> <!-- die Zeilen von hier -->
	
	<tr>
		<td>Hello</td>
		<td>World</td>
	</tr>
	<tr>
		<td>Hola</td>
		<td>Mundo</td>
	</tr>
	<tr>
		<td>Bonjour</td>
		<td>Monde</td>
	</tr>
	
	</div> <!-- bis hier sollen ausblendbar sein -->

	<tr>
		<td>Ciao</td>
		<td>Mondo</td>
	</tr>
</table>
So funktioniert das aber offensichtlich nicht. Ich möchte allerdings vermeiden, allen <tr>s Namen geben zu müssen um sie dann in einer Schleife auszublenden Das obige Skript ist nur ein stark vereinfachtes Beispiel, das echte ist viel komplexer und in eine PHP-MySQL-Template-Engine-Umgebung eingebettet und es gibt natürlich auch mehrere Blöcke die ein-/ausgeblendet werden sollen.

Jemand 'ne Idee?
 
Das liegt daran, dass die Tabelle das <div> nicht als Elternstruktur anerkennt.

So funktioniert es:

HTML: 
<script language="JavaScript" type="text/javascript">
	function showHide(id) {
		var dasDiv = document.getElementById(id);
		if (dasDiv.style.display == 'block') {
			dasDiv.style.display = 'none';
		} else {
			dasDiv.style.display = 'block';
		}
	}
</script>

<a href="javascript: showHide('xy');">
	Ein-/Ausblenden
</a>

<table>
	<tr>
		<td>Hallo</td>
		<td>Welt</td>
	</tr>
</table>
	<div id="xy" style="display:block"> <!-- die Zeilen von hier -->
	<table>
	<tr>
		<td>Hello</td>
		<td>World</td>
	</tr>
	<tr>
		<td>Hola</td>
		<td>Mundo</td>
	</tr>
	<tr>
		<td>Bonjour</td>
		<td>Monde</td>
	</tr>
	</table>
	</div> <!-- bis hier sollen ausblendbar sein -->
<table>
	<tr>
		<td>Ciao</td>
		<td>Mondo</td>
	</tr>
</table>
 
Ja, danke erstmal, das leuchtet ein.
Allerdings krieg ich dann Ärger mit den ganzen Styles, die Tabelle hat in echt Ränder und Spacing und Padding und das alles. Klar kann man das trotzdem hinkriegen, etwa mir Sonderbehandlung der Bottom/Top-Styles, das wird aber in der eh schon komplexen Struktur eine riesen Pfriemelei.

Gibt es noch Hoffnung auf eine simple Lösung?
 
Ha! Ich hab's.
Beim Stichwort "Elternstruktur" ist ein Groschen gefallen - da war doch noch was zwischen <table> und <tr>, das nie irgend jemand braucht: <tbody>. So funktioniert's:
HTML: 
<script language="JavaScript" type="text/javascript">
	function showHide(id) {
		var tb = document.getElementById(id);
		if (tb.style.display == 'none') {
			tb.style.display = 'block';
		} else {
			tb.style.display = 'none';
		}
	}
</script>

<a href="javascript:void showHide('x');">X an/aus</a>
<br>
<a href="javascript:void showHide('y');">Y an/aus</a>

<table>
	
	<tr>
		<td>Hallo</td>
		<td>Welt</td>
	</tr>
	
	<tbody id="x">
		<tr>
			<td>Tschüss</td>
			<td>Welt</td>
		</tr>
		<tr>
			<td>Adios</td>
			<td>Mundo</td>
		</tr>
		<tr>
			<td>Au revoir</td>
			<td>Monde</td>
		</tr>
	</tbody>

	<tr>
		<td>Hello</td>
		<td>World</td>
	</tr>

	<tbody id="y">
		<tr>
			<td>Hello</td>
			<td>Moon</td>
		</tr>
		<tr>
			<td>Hola</td>
			<td>Luna</td>
		</tr>
		<tr>
			<td>Bonjour</td>
			<td>Lune</td>
		</tr>
	</tbody>

	<tr>
		<td>Ciao</td>
		<td>Mondo</td>
	</tr>

</table>
Besten Dank an den Stichwortgeber!
 
Hi,

eine andere Möglichkeit wäre, Zeilen über ihren Index (beginnend bei Null) aus-/einzublenden.
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function showHide(strID, intStart, intEnde){
  var arrRows = document.getElementById(strID).rows;

  for(var i=intStart; i<=intEnde; i++){
    if(arrRows[i].style.display == "none"){
      arrRows[i].style.display = "";
    }else{
      arrRows[i].style.display = "none";
    }
  }
}
 //-->
</script>
</head>
<body>
<a href="javascript:void showHide('tableID', 1, 3);">
	Ein-/Ausblenden
</a>

<table id="tableID">
  <tr>
    <td>Hallo</td>
    <td>Welt</td>
  </tr>

  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
  <tr>
    <td>Hola</td>
    <td>Mundo</td>
  </tr>
  <tr>
    <td>Bonjour</td>
    <td>Monde</td>
  </tr>

  <tr>
    <td>Ciao</td>
    <td>Mondo</td>
  </tr>
</table>
</body>
</html>
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück