Zeilen en-bloc ein/ausblenden @ tutorials.de: Tutorials, Forum & Hilfe

ManicMarble · 28.09.07 21:01

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-Code:

<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?

**Flex** · 28.09.07 21:10

Das liegt daran, dass die Tabelle das <div> nicht als Elternstruktur anerkennt.

So funktioniert es:

HTML-Code:

<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>

ManicMarble · 28.09.07 21:19

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?

ManicMarble · 28.09.07 23:38

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-Code:

<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!

**Quaese** · 28.09.07 23:46

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

TListView Zeilen ausblenden

Tabellen Zeilen ein und ausblenden

Zeilen ausblenden

Zeilen in JTable ausblenden

[C++ MFC] Zeilen in CListCtrl ausblenden

E-Mail:

Abonnieren Abbestellen