✔ Tabelle mit aufklapparem Menü

C

cloda

Grünschnabel
Hallo,

ich habe eine Tabelle, mit Daten und möchte ca. 5 Reihen zu einem aufklappbaren Menü zusammenfügen. Leider klappt's bei mir nicht.

ich hab dieses Gerüst (dies ist nur ein Beispiel):
Code: 
<body>
<table>
<tr> <td> ID</td> <td> 12</td></tr>
<tr> <td>Typ</td> <td> integer</td></tr>
<tr> <td>Servertyp</td> <td>server</td></tr>
<tr> <td>Manager</td> <td>XXX</td></tr>
<tr> <td>Manager01</td> <td>XXX01</td></tr>
<tr> <td>Manager02</td> <td>XXX02</td></tr>
</table>
</body>
Ich möchte in dieser Tabelle ein Menü haben. Nämlich MAnager. Und wenn ich auf Manager klicke sollen die Reihen Manager01 und Manager02 angezeigt werden.
Ich hab eine display Methode (der Standard was man im Netz überall findet), die ich dazu benutze:

Code: 
function display(mode,elementID){
      
        if(mode=='s'){
          document.getElementById(elementID).style.visibility='visible';
        }else{
            document.getElementById(elementID).style.visibility='hidden';
            
         }
}
nur leider funktioniert es nicht bei mir. Entweder werden alle Reihen sofort angezeigt oder ich krieg zwar ein aufklappbares Menü aber nicht schön in den Reihen sondern alles zusammengefügt in einem <td> so dass der andere Teil leer ist.

Könnte mir da jemand bitte helfen?

danke

Cloda
 
Du musst den "Unterpunkten" noch eine ID vergeben.
Ich benutze dazu dann immer style.display.
Du musst gegebenenfalls den style.display vordefinieren.
Javascript: 
function display ( id ) 
{
document.getElementById(id).style.display = document.getElementById(id).style.display == 'none' ? 'block' : 'none';
}
Tobee
 
Hi Tobee,

danke für Deine Hilfe.
Irgendwie klappt es aber bei mir nicht.
ich rufe die display Methode im Manager-teil auf
und dann füge ich den unterpunkten id zu
Code: 
<tr><td onClick="display('s1')">manager</td><td ></td></tr>

<tr id="s1"><td>manager01</td><td >01</td></tr>
<tr id="s1"><td>manager02</td><td >02</td></tr>

so wird zwar beim ancklicken der manager01 angezeigt, aber die zwei <td> (also manager01 und 01 )werden in einem <td> zusammengeschmelzt und der manager02 gar nicht angezeigt.

was ist da falsch?

danke

Cloda
 
Hi,

probier's mal so:

Code: 
<tr><td onclick="display('s1')">manager 01</td><td>&nbsp;</td></tr>
<tr id="s1"><td>manager01</td><td>01</td></tr>
<tr><td onclick="display('s2')">manager 02</td><td>&nbsp;</td></tr>
<tr id="s2"><td>manager02</td><td>02</td></tr>
denn eine ID muß in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vergeben werden.
 
ich bin's nochmal,

jetzt wird alles angezeigt und wieder geschlossen. leider paßt aber die tabelle nicht. das menü ist ständig nur in dem linken bereich der tabelle.

also ich mach jetzt:
Code: 
 <body> 
<table> 
<tr> <td> ID</td> <td> 12</td></tr> 
<tr> <td>Typ</td> <td> integer</td></tr> 
<tr> <td>Servertyp</td> <td>server</td></tr> 
<tr onClick="display('sub1')"> <td>Manager</td> <td>XXX</td></tr> 
<tr style="display:none;" name="sub1"> <td>Manager01</td> <td>01</td></tr> 
<tr style="display:none;" name="sub1"> <td>Manager02</td> <td>02</td></tr> 
<tr style="display:none;" name="sub1"> <td>Manager03</td> <td>03</td></tr> 
</table> 
</body> 


 function display( name ){ 
 for(i=0; i< document.getElementsByName(name ).length;i++) 
 { 
document.getElementsByName(name)[i].style.display =   document.getElementsByName(name)[i].style.display == 'none' ? 'block' : 'none'; 
 } 
}
die Tabelle soll wie folgt aussehen wenn das Menü offen ist:
Code: 
ID                    12
Typ                   integer
ServerTyp             server
Manager               XXX
Manager01             01
Manager02             02
Manager03             03
es sieht aber leider so aus :( :
Code: 
ID                    12
Typ                   integer
ServerTyp             server
Manager               XXX
Manager0101
Manager0202
Manager0303
was stimmt da nicht bitte?

danke

Cloda
 
HTML: 
<html>
<head>
<title></title>
<script type="text/javascript">
function display( name )
{ 
  document.getElementsByName(name)[i].style.display = document.getElementsByName(name)[i].style.display == 'none' ? 'block' : 'none'; 
}
</script>
</head>
<body>
<table>
  <tr><td>ID</td><td>12</td></tr> 
  <tr><td>Typ</td><td>integer</td></tr> 
  <tr><td>Servertyp</td><td>server</td></tr> 
  <tr onClick="display('sub1');"> <td>Manager</td> <td>XXX</td></tr>
  <tr><td>
    <table id="sub1" border="0" cellpadding="0" cellspacing="0" style="display:none;">
      <tr> <td>Manager01</td> <td>01</td></tr> 
      <tr> <td>Manager02</td> <td>02</td></tr> 
      <tr> <td>Manager03</td> <td>03</td></tr> 
    </table>
  </td></tr>
</table> 
</body> 
</html>
Geht es so?
Tobee
 
Zuletzt bearbeitet:
vielen Dank für die Antwort Tobee,

es wird super angezeigt, sehr schön geordnet nur leider wieder alles in der linken Hälfte der Tabelle :(
 
cloda hat gesagt.:
vielen Dank für die Antwort Tobee,

es wird super angezeigt, sehr schön geordnet nur leider wieder alles in der linken Hälfte der Tabelle :(
Zum Vergrößern anklicken....
Code: 
<html>
<head>
<title></title>
<script type="text/javascript">
function display( id )
{ 
  document.getElementById(id).style.display = document.getElementById(id).style.display == 'none' ? 'block' : 'none'; 
}
</script>
</head>
<body>
<table>
	<tr>
		<td>ID</td>
		<td>12</td>
	</tr>
	<tr>
		<td>Typ</td>
		<td>integer</td>
	</tr>
	<tr>
		<td>Servertyp</td>
		<td>server</td>
	</tr>
	<tr>
		<td onClick="display('sub1');">Manager</td>
		<td onClick="display('sub1');">XXX</td>
	</tr>
	<tr>
		<td>

			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td>Manager01</td>
				</tr>
				<tr>
					<td>Manager02</td>
				</tr>
				<tr>
					<td>Manager03</td>
				</tr>
			</table> 
		
		</td>
		<td>

			<table id="sub1" border="0" cellpadding="0" cellspacing="0" style="display:none;">
				<tr>
					<td>01</td>
				</tr>
				<tr>
					<td>02</td>
				</tr>
				<tr>
					<td>03</td>
				</tr>
			</table> 
		
		</td>
	</tr>
</table> 
</body> 
</html>
Tobee
 
Hallo,

nur zur Info:

In Firefix funktioniert das Menü wenn ich die Methode:

Code: 
function display( id )
      {
          
          
          for(i=0; i< document.getElementsByName(id).length;i++)
          {
         
              if(document.getElementsByName(id)[i].style.display == 'none')
              { 
                      document.getElementsByName(id)[i].style.display='table-row';
                      document.images[1].src='img/minus.png';
                   
              }
              else
              {
                  document.getElementsByName(id)[i].style.display = 'none';
                  document.images[1].src='img/plus.png';
              }
          }
          
       }
benutze.
Man muss einfach table-row nehmen. Das Problem ist, dass dies nicht bei IE funktioniert. 'block' funktioniert bei IE auch nicht. Wenn ich die displayMethode mit getElementbyID mach, zeigt er in IE nur den 'Manager1 01' an und bei Firefox ist das ganze Menü durcheinander.

Die Tabelle sieht so aus:

Code: 
<table>
<tr>
  <td>servertyp</td>
  <td>typ</td>
</tr>
<tr >
   <td>
         <a ihref="javascript:display('sub1')" >
                  <img title=""  src="img/plus.png"/>
         </a>
         <span >manager</span>
  </td>
   <td ></td>
</tr>

<tr style="display:none;" name="sub1">
   <td >manager1</span></td >
    <td >01</td>
</tr>
<tr style="display:none;" name="sub1">
    <td >manager2</td>
    <td >02 </td>
</tr>
<tr style="display:none;" name="sub1">
    <td >manager3</td>
    <td >  03 </td>
</tr>
</table>
falls jemand noch eine Idee hat wie ich es in IE zum laufen bringe, würde mich freuen.
Ansonsten nochmal vielen Dank an Tobee für seine Hilfe.

Grüße

Cloda

// EDIT 1

Hallo,

falls jemand an der Lösung interessiert ist:

Ich hab die Methoden verschachtelt und für IE angepasst:

Code: 
       var browser = navigator.appName;
     
       function display( id )
      {
      
          var liste = document.getElementsByName(id);
          
          if(browser== "Microsoft Internet Explorer"){
         displayID(id);        
         }
          else
          {
          for(i=0; i< liste.length;i++)
          {
              if(document.getElementsByName(id)[i].style.display == 'none')
              { 
                  document.getElementsByName(id)[i].style.display='table-row';
                  document.images[1].src='img/minus.png';
              }
              else
              {
                  document.getElementsByName(id)[i].style.display = 'none';
                  document.images[1].src='img/plus.png';
              }
          }
         }
       }

//Methode für IE und Opera
 
function displayID(id)
       {
           var TRliste = document.getElementsByTagName('tr');
           for (i=0; i<TRliste.length;i++)
           {
               if(TRliste[i].getAttribute('id') =='menu')
               {
                   if(TRliste[i].style.display=='none')
                   {
                       TRliste[i].style.display='block';
                       document.images[1].src='img/minus.png'; 
                   }
                   else
                   {
                       TRliste[i].style.display='none'; 
                       document.images[1].src='img/plus.png';
                   }
               }
           }
       }
Da IE und Opera anscheinend auf die Methode getElementsByName nicht reagieren musste ich es über getElementsByTagName lösen.

Jetzt wird das Menü schön angezeigt in den Browsern.

schönen Tag

Cloda

// EDIT 2

Hallo nochmal,

das ganze hin und her wird verursacht durch 'id' und 'name'. der explorer braucht einfach beides. und dann reicht diese einfache funktion:

Code: 
 function display( id )
      {
      
          var liste = document.getElementsByName(id);
          
          for(i=0; i< liste.length;i++)
          {
              if(liste[i].style.display == 'none')
              { 
                  if(browser== "Microsoft Internet Explorer")
                  {
                  liste[i].style.display='block';
                  }
                  else
                  {
                  liste[i].style.display='table-row';
                  }
                  document.images[1].src='img/minus.png';
              }
              else
              {
                  liste[i].style.display = 'none';
                  document.images[1].src='img/plus.png';
              }
          }
          liste=null;
       }
Cloda
 
Hallo!

Ich habe diese Lösung gefunden und brauche sie unbedingt für mein Projekt. Das klappt auch alles soweit bei mir, nur ist das Problem, dass bei Aufruf des JavaScripts die versteckten Zeilen sichtbar gemacht werden, dann aber sofort wieder verschwinden, weil die Tabelle wohl nochmal geladen wird und somit wieder alles auf display:none gesetzt wird. Hat jemand dafür ne Lösung?

Gruß
Rantan

// EDIT

Hat sich schon erledigt. Hab hinter den Methodenaufruf noch ein "return false" gesetzt und dann gings.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück