Zeile einer Tabelle einblenden/ausblenden - Javascript & Ajax @ tutorials.de: Forum & Hilfe

Mik3e · 22.05.06, 11:39

Hi zusammen,

Hab mal wieder Mühe mit JS (wie ich es hasse

Hab eine Tabelle mit mehreren Zeilen. In jeder zweiten zeile befindet sich wiederum eine Tabelle.

In der führenden Zeile gibt es nun einen Link "ein-ausblenden", der die darunterliegende Zeile (mit der Tabelle) ein- bzw. ausblenden soll (typisches "aufklappen").

Mein Problem:
Ausblenden klappt super aber beim Einblenden zerstört mir das JS die komplette Formatierung. Es dürfte irgendwas mit den Display Eigenschaften "block" und "none" zu tun haben. Habe auch schon mehrere Varianten versucht (zB mit expliziter Definition der Colspan) aber ich kriegs einfach nicht hin.

Ist für einen JS Guru hier (Sven!?

sicher nur ein kurzer Hingucker um die Lösung zu finden.

Seht Euch das nachfolgende Beispiel an, dann wirds klarer (die rote Zeile gehört jeweils durch die darüberliegende ausgeblendet).

Demo-File zum Testen:

            
            
              
                
                  
                    HTML-Code:
                  
                

                  
                   	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
// <![CDATA[

function setVisibility(rowName) {
	// Tabellenzelle ermitteln
	
	var actualVisibility=document.getElementById(rowName).style.visibility;

	if(actualVisibility=='' || actualVisibility=='visible') {
		document.getElementById(rowName).style.visibility = "hidden";
		document.getElementById(rowName).style.display = "none";
	} else {
		document.getElementById(rowName).style.visibility = "visible";
		document.getElementById(rowName).style.display = "block";
	}
}
// ]]>
</script>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>

<body>
<table width="200" border="1" cellpadding="2">
  <tr>
    <td nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 1  </span></td>
    <td nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 2 </span></td>
    <td width="100%" nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 3 </span></td>
  </tr>
  <tr>
    <td><a href="#" onclick="setVisibility('testrow1')">ein/ausblenden</a></td>
    <td>A</td>
    <td width="100%">B</td>
  </tr>
  <tr id="testrow1" name="testrow1">
    <td bgcolor="#FF0000">&nbsp;</td>
    <td colspan="2" bgcolor="#FF0000"><table width="200" border="1" cellpadding="2">
      <tr>
        <td>x1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>x2</td>
        <td>2</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><a href="#" onclick="setVisibility('testrow2')">ein/ausblenden</a></td>
    <td>A</td>
    <td width="100%">B</td>
  </tr>
  <tr id="testrow2" name="testrow2">
    <td bgcolor="#FF0000">&nbsp;</td>
    <td colspan="2" bgcolor="#FF0000"><table width="200" border="1" cellpadding="2">
      <tr>
        <td>x3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>x4</td>
        <td>4</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>
                  
                

              
            
          

Ich teste das ganze derzeit mit Firefox... Sollte im IE klarerweise dann auch funktionieren..

Danke Euch im Voraus,
Ciao,
Mike

**Gumbo** · 22.05.06, 12:27

Probier mal den Wert „table-row“ oder eine leere Zeichenkette statt des Werts „block“. Bei letzterem sollten die Browser den Standardeigenschaftswert des Elements anwenden. Übrigens ist es überflüssig beide Eigenschaften (display und visibility) zu ändern.

Mik3e · 22.05.06, 14:27

Im IE klappts wunderbar mit "block" und "none".
Allerdings kennt der IE die Display Eigenschaft "table-row" nicht...

Das Problem liegt irgendwo beim Colspan. Denn wenn Firefox die Zeile wieder erneut einblendet, "quetscht" er sie innerhalb die erste Zelle der darüberliegenden Tabelle...

Das display zusätzlich ist notwendig, damit er die nachfolgenden Zellen nach oben zieht (und kein leerer Platzhalter bleibt).

Hast du noch ne Idee?

Mik3e · 22.05.06, 14:29

Ahh.. mit der leeren Zeichenkette hats nun geklappt... Ist mir zwar nicht verständlich, aber danke jedenfalls

Ciao,
Mike

**Gumbo** · 22.05.06, 16:48

Das Tauschen der visibility-Eigenschaft ist nicht nötig. Denn die visibility-Eigenschaft regelt nur die Sichtbarkeit des Elements, die display-Eigenschaft regelt hingegen die Darstellungsform eines Elements.

Tucker · 27.06.06, 22:18

Hi,
ich hab mir zwar geschworen mich nie wirklich intensiv mit JS zu beschäftigen, allerdings lässt sich das nun nicht mehr umgehen. Ich habe ein gleichartiges Problem. Ich will über eine Selectbox verschiedene Inhalte anzeigen lassen und andere wiederum ausblenden.
Dazu habe ich folgendes Script geschrieben:

            
                    javascript Code: 
                  
                        function show_tabelle ( uebergabe )
{
    // array
    var ids = new Array ( "1maenner", "2maenner", "1frauen" );
    // ende-array
    
    for ( i = 0 ; i < ids.length ; i++ )
    {
        //for ( z = 3 ; z < elems.length ; z++ )
        
        if ( document.getElementById(ids[i]).id == uebergabe )
        {
            document.getElementById(ids[i]).style.display = '';
        }
        else
        {
            document.getElementById(ids[i]).style.display = 'none';
        }
    }
}

Dieses Script funktioniert bei Opera wunderbar. Im IE passiert gar nichts. Kann mir jemand sagen, woran das liegt?

P.S.: Irgendwie mag mich IE nicht mehr. Alles was in allen anderen Browsern , funktioniert heute nicht im IE.

**Sven Mintel** · 27.06.06, 22:32

Kannst du mal die "Inhalte" dazu zeigen?
Rein von der Logik her sollte diese Funktion nur 1mal Änderungen verursachen, da

            
                    Code:
                  
                   	if ( document.getElementById(ids[i]).id == uebergabe )

...natürlich nie zutreffen wird.

Tucker · 27.06.06, 22:37

So würde ein Element aussehen:

            
            
              
                
                  
                    HTML-Code:
                  
                

                  
                   	<table id="2maenner"  width="408" cellspacing="1"  class="tabellenuebersicht" style="display:none;">
						<tr>
							<th align="center">
								Platz
							</th>
							<th align="center">
								Mannschaft
							</th>
							<th align="center">
								Punkte
							</th>
							<th>
								Spiele
							</th>
						</tr>
						<tr>
							<td align="center">
								1
							</td>
							<td align="center">
								TSV R&auml;hnitz
							</td>
							<td  align="center">
								20:0
							</td>
							<td>
								10
							</td>
						</tr>
						<tr>
							<td align="center">
								...
							</td>
							<td>
							
							</td>
							<td>
							
							</td>
							<td>
							
							</td>
						</tr>
						<tr>
							<td align="center">
								9
							</td>
							<td  align="center">
								Planeta Radebeul
							</td>
							<td  align="center">
								2:18
							</td>
							<td>
								10
							</td>
						</tr>
						<tr style="font-weight: bold;">
							<td align="center">
								10
							</td>
							<td align="center">
								SSV Lommatzsch
							</td>
							<td  align="center">
								0:20
							</td>
							<td>
								10
							</td>
						</tr>
					</table>
                  
                

              
            
          

Sind halt noch mehr solcher kleiner Tabellen.

**Sven Mintel** · 27.06.06, 23:48

Mmmh...ist natürlich Quatsch...meine Bemerkung mit der Logik

bei mir haut das hin, so wie du es hast...

            
            
              
                
                  
                    Code:
                  
                

                  
                   	<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
      function show_tabelle ( uebergabe )
      {
          // array
          var ids = new Array ( "1maenner", "2maenner", "1frauen" );
          // ende-array
         
          for ( i = 0 ; i < ids.length ; i++ )
          {
              if ( document.getElementById(ids[i]).id == uebergabe )
              {
                  document.getElementById(ids[i]).style.display = '';
              }
              else
              {
                  document.getElementById(ids[i]).style.display = 'none';
              }
          }
      } 
//-->
</script>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<b onclick="show_tabelle('1frauen')">1frauen</b><br>
<table border="1" id="1frauen"  width="408" cellspacing="1"  class="tabellenuebersicht" style="display:none;">
 <tr>
  <th align="center">
    1frauen
  </th>
 </tr>
</table>
<b onclick="show_tabelle('1maenner')">1maenner</b><br>
<table border="1" id="1maenner"  width="408" cellspacing="1"  class="tabellenuebersicht" style="display:none;">
 <tr>
  <th align="center">
    1maenner
  </th>
 </tr>
</table>
<b onclick="show_tabelle('2maenner')">2maenner</b><br>
<table border="1" id="2maenner"  width="408" cellspacing="1"  class="tabellenuebersicht" style="display:none;">
 <tr>
  <th align="center">
    2maenner
  </th>
 </tr>
</table>
</body>
</html>
                  
                

              
            
          

...die einzige Unstimmigkeit, welche ich sehe, ist die Tatsache, dass die IDs mit einer Ziffer beginnen...die sollte das aber nicht zum Scheitern bringen.

Tucker · 28.06.06, 00:14

Bei mir funktioniert es komischerweise nicht. Aber schau mal bei mir: http://www.ssvlommatzsch.de/cvs/index.html
Bei der Sparte Tabellenuebersicht ist das Script eingebunden.

**Sven Mintel** · 28.06.06, 00:24

Ahso...es liegt an der Selectbox, der IE interpretiert kein onclick in <option>

Schreibs so:

            
                    Code:
                  
                   	<select name="tabellenuebersicht" onchange="show_tabelle(this.value)">
   <option>Mannschaft...</option>
  <option>----------------------</option>
  <option value="1maenner">1. M&auml;nner</option>
  <option value="2maenner">2. M&auml;nner</option>
  <option value="1frauen">1.Frauen</option>
</select>

Tucker · 28.06.06, 00:33

Vielen Dank. Jetzt funktioniert es. Na ja, werd versuchen mich weiter dahinter zu klemmen.

08.02.10, 19:54

Hallo,

hab eine kurze Frage. Hab obigen Quellcode (den obersten) genommen um Tabellen ein und ausblenden zu können. Am Anfang ist die Tabelle jedoch sichtbar und wird dann auf einen Klick versteckt. Ich hätte aber gerne die Tabelle versteckt und beim klick soll sie erscheinen. Was muss ich ändern?

Tschüß

Brunni

**Maik** · 08.02.10, 20:26

Hi,

Zitat:

Zitat von Brunni

Hallo,

hab eine kurze Frage. Hab obigen Quellcode (den obersten) genommen um Tabellen ein und ausblenden zu können. Am Anfang ist die Tabelle jedoch sichtbar und wird dann auf einen Klick versteckt. Ich hätte aber gerne die Tabelle versteckt und beim klick soll sie erscheinen. Was muss ich ändern?

Tschüß

Brunni

Die wichtigen Zeilen / Passagen sind hier fett markiert:

            
            
              
                
                  
                    Code:
                  
                

                  
                   	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" language="javascript">
// <![CDATA[

function setVisibility(rowName) {
        // Tabellenzelle ermitteln

        var actualVisibility=document.getElementById(rowName).style.visibility;

        if(actualVisibility=='' || actualVisibility=='visible') {
                document.getElementById(rowName).style.visibility = "hidden";
                document.getElementById(rowName).style.display = "none";
        } else {
                document.getElementById(rowName).style.visibility = "visible";
                document.getElementById(rowName).style.display = ""; /* den display-Wert block hab ich entfernt, da dies in dem einen oder anderen Browser zu Darstellungsproblemen führt, und der Grund dieses Themas war */
        }
}
// ]]>
</script>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
-->
</style>
</head>

<body>
<table width="200" border="1" cellpadding="2">
  <tr>
    <td nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 1  </span></td>
    <td nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 2 </span></td>
    <td width="100%" nowrap="nowrap" bgcolor="#000000"><span class="style1">Attrib 3 </span></td>
  </tr>
  <tr>
    <td><a href="#" onclick="setVisibility('testrow1')">ein/ausblenden</a></td>
    <td>A</td>
    <td width="100%">B</td>
  </tr>
  <tr id="testrow1" name="testrow1" style="visibility:hidden;display:none;">
    <td bgcolor="#FF0000">&nbsp;</td>
    <td colspan="2" bgcolor="#FF0000"><table width="200" border="1" cellpadding="2">
      <tr>
        <td>x1</td>
        <td>1</td>
      </tr>
      <tr>
        <td>x2</td>
        <td>2</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><a href="#" onclick="setVisibility('testrow2')">ein/ausblenden</a></td>
    <td>A</td>
    <td width="100%">B</td>
  </tr>
  <tr id="testrow2" name="testrow2" style="visibility:hidden;display:none;">
    <td bgcolor="#FF0000">&nbsp;</td>
    <td colspan="2" bgcolor="#FF0000"><table width="200" border="1" cellpadding="2">
      <tr>
        <td>x3</td>
        <td>3</td>
      </tr>
      <tr>
        <td>x4</td>
        <td>4</td>
      </tr>
    </table></td>
  </tr>
</table>
</body>
</html>
                  
                

              
            
          

mfg Maik

09.02.10, 00:04

Hallo,

super, besten Dank, hat wunderbar geklappt. Eine Frage noch. Ist es normal, dass er dann beim ein- bzw. ausblenden ganz nach oben auf die Seite springt, oder kann man das auch verhindern?

Tschüß

Brunni