# Mit getElementById(); mehrere IDs ansprechen



## Sebigf (4. Januar 2006)

Hallo zusammen!

Ich habe vor ein auf- / zuklapp Menü zu machen mit mehreren Unterpunkten. Und schon währen wir beim Problem...

Ich habe 3x ein <tr> und würde diese mit einer func. auf- / zuklappen
Hier meine Funktion bisher...



```
function open_close(id)
{
  var obj = document.getElementById(id);
  obj.style.display = (obj.style.display == "none") ? "" : "none";
 
}
```

Wie mache ich das nun, dass ich mehrere IDs ansprechen kann, aber so dass es variable bleibt. Also am besten ohne for().

Danke !


----------



## em-ix (5. Januar 2006)

Warum ohne Schleife? Das ist das einzige sinnvolle Mittel für dein Vorhaben... wenn die IDs nicht nach einem konkreten Muster benannt sind, kannst du sie ja in ein Array schreiben... Aber eine Schleife zu umgehen macht keinen Sinn.


----------



## cryo (5. Januar 2006)

Hi!

Mach doch einen DIV-Bereich um das 'TR'.

```
<div id="meineId">
  <tr>
  <td>...</td>
  </tr>
  <tr>
  <td>...</td>
  </tr>
  <tr>
  <td>...</td>
  </tr>
</div>
```
*Aber nichts desto trotz > ID's, wenn sie gleich benannt sein sollten, sollten immer nur ein EINZIGES mal innerhalb eines Dokumentes vorkommen.* 

Was hast Du denn gegen eine for-Schleife?
An eine Funktion kannst Du doch beliebige Parameter übergeben.

```
function open_close(){
  var cntArgs = open_close.arguments.length;
  for( var i=0; i<cntArgs; i++ ){
    var obj = document.getElementById(open_close.arguments[i]);
    obj.style.display = (obj.style.display == "none") ? "" : "none";
  }
}
open_close('id1','id2','id3','id4');
```



*Ich hatte bei mir mal so was ähnliches, und schrieb dann dies:* 

```
function CL_openBox(fId,fTrA,fTrB,fTrC){
    var d = document;
    if( d.getElementById(fTrA+fId).style.display == "" ){
        d.getElementById(fTrA+fId).style.display = "none";
        d.getElementById(fTrB+fId).style.display = "none";
        d.getElementById(fTrC+fId).style.display = "none";
    }else{
        d.getElementById(fTrA+fId).style.display = "";
        d.getElementById(fTrB+fId).style.display = "";
        d.getElementById(fTrC+fId).style.display = "";
    }
}
```


```
<table>
<tr id="trA1"><td>...</td></tr>
<tr id="trB1"><td>...</td></tr>
<tr id="trC1"><td>...</td></tr>

<tr id="trA2"><td>...</td></tr>
<tr id="trB2"><td>...</td></tr>
<tr id="trC2"><td>...</td></tr>
</table>
```
Die Zahl hinter 'trA...' war bei mir immer die ID des Datensatzes aus der DB. Und in diesem Falle musste ich immer drei TR's auf einmal ausblenden.

Aufruf des Ganzen war dann immer über nen Button innerhalb eines TD's innerhalb eines TR's.
	
	
	



```
CL_openBox(1,'trA','trB','trC')
```

Ich hoffe ich konnte Dir etwas helfen oder Dir einen kleinen Denkansatz spendieren   .

MfG


----------



## Maik (5. Januar 2006)

cryo hat gesagt.:
			
		

> Hi!
> 
> Mach doch einen DIV-Bereich um das 'TR'.
> 
> ...


Seit wann darf ein div-Element zwischen table und tr notiert werden?


----------



## Sebigf (5. Januar 2006)

Danke für die Antworten.

@ cryo

Deine Lösung sieht soweit gut aus, nur wie mache ich das wenn ich z.b. einmal 10 und einmal 14 <tr>'s habe ?

Danke


----------



## cryo (6. Januar 2006)

Hi!

Ein 'div' um ein 'tr' schreiben geht. In wie weit das mit den Konventionen übereinstimmt habe ich momentan keine Info ...
Logisch gedacht sollte das normalerweise nicht so existieren, da vor einem '<tr>' immer ein '</tr>', '</th> oder <table ...> stehen sollte.

Aber was solls, es funktioniert nun mal ...   

In Bezug auf Deine 10 oder 14 TR's währe es ja günstig wenn Du Dir die Funktion mit der variablen Anzahl an Übergabeparameter
schnappst und Sie Deinen Vorstellungen soweit anpasst.
Oder ...?


```
function open_close(){
  var cntArgs = open_close.arguments.length;
  for( var i=0; i<cntArgs; i++ ){
    var obj = document.getElementById(open_close.arguments[i]);
    obj.style.display = (obj.style.display == "none") ? "" : "none";
  }
}
open_close('id1','id2','id3','id4');
```
Hier ist es ja egal wieviele ID's Du übergibts.

MfG


----------



## Maik (6. Januar 2006)

cryo hat gesagt.:
			
		

> Ein 'div' um ein 'tr' schreiben geht. In wie weit das mit den Konventionen übereinstimmt habe ich momentan keine Info ...


Der W3C-Validator gibt für dieses 'Konstrukt' eine Fehlermeldung aus.


----------



## cryo (6. Januar 2006)

Nun ja, da wäre ja dieser Part schonmal vom Tisch   . Thanks

Da kann man mal sehen wie nett die (manche nur bestimmt) Browser'chen sind und das ganze doch machen. Aber dieser Fall mit dem DIV um das TR erledigt sich ja wenn man komplett mit CSS die Seite aufbaut oder im Falle von 'Sebigf' die Beispiel-Funktion 'open_close()' einsetzt.

MfG


----------



## Sven Mintel (6. Januar 2006)

Das mit dem div ist nicht unbedingt notwendig.. 
Man kann auf die einzelnen Reihen einer Tabelle ja über deren *rows*-Auflistung bzw. über 
*document.getElementById('tabellenID'). getElementsByTagName('tr')* zugreifen. 

Man müsste der Funktion also nur den Start+End-Index der zu ändernden <tr> übergeben.


----------



## Sebigf (11. Januar 2006)

Hallo zusammen 

Wie gesagt habe ich das Problem gelöst...


```
function open_close(part)
{
	for (var i = 0; i < 10; i++)
	{
	  var obj = document.getElementById(part+i);
	  
	  if(obj)	  
	  obj.style.display = (obj.style.display == "none") ? "" : "none";	  
	}
}
```

Geht alles echt gut, nur wollte ich es nun so machen, dass alle "anderen" IDs (also die, die nicht angesprochen wurde) auch auf "" (geschlossen/hidden) wechseln.

Dass ich also dem Besucher nur die Möglichkeit lasse, nur ein geöffnetes Feld zu sehen. Wie stelle ich das am besten an ?

Danke


----------



## cryo (11. Januar 2006)

Hi!

Ich habe bei Deiner Funktion





> function open_close(part)
> {
> for (var i = 0; i < 10; i++)
> {
> ...


gesehen das Du doch nur eine ID übergibts, also auch nur ein Element einblenden willst.
Auf dieser Basis habe ich mal schnell was zusammengeschustert, daher ist auch keine Prüfung auf Existenz des jeweiligen Elementes oder auf 'getElementById()' vorhanden. Dazu kommt noch das man den Code bestimmt noch optimieren müsste. Aber das steht Dir frei  . Jedenfalls funktionierts...
	
	
	



```
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>Free to use</title>
<script language="JavaScript" type="text/javascript">
<!--
function open_close(){
    this.elIdent    = '';
    this.maxEl      = 0;
}
open_close.prototype.open = function(fEl){
    var idName = '';
    for( var i=0; i<this.maxEl; i++ ){
        idName = this.elIdent+i;
        if( i!=fEl ){
            document.getElementById(idName).style.display = "none";
        }else{
            document.getElementById(idName).style.display = "";
        }
    }
    return true;
};
//-->
</script>
</head>

<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

    <table width="300" border="0" cellspacing="1" cellpadding="2">
    <tr>
    <td align="left" valign="top" style="background-color: #d6d6d6;" onclick="myObj.open(0);">Öffne Bereich 1</td>
    </tr>
    <tr>
    <td align="left" valign="top" style="background-color: #eeeeee; display: none;" id="rowEl_0">Inhalt Bereich 1<br>.........................<br>.........................<br></td>
    </tr>
    <tr>
    <td align="left" valign="top" style="background-color: #d6d6d6;" onclick="myObj.open(1);">Öffne Bereich 2</td>
    </tr>
    <tr>
    <td align="left" valign="top" style="background-color: #eeeeee; display: none;" id="rowEl_1">Inhalt Bereich 2<br>.........................<br>.........................<br></td>
    </tr>
    <tr>
    <td align="left" valign="top" style="background-color: #d6d6d6;" onclick="myObj.open(2);">Öffne Bereich 3</td>
    </tr>
    <tr>
    <td align="left" valign="top" style="background-color: #eeeeee; display: none;" id="rowEl_2">Inhalt Bereich 3<br>.........................<br>.........................<br></td>
    </tr>
    </table>

    <script language="JavaScript" type="text/javascript">
    <!--
    myObj = new open_close();
    myObj.elIdent   = 'rowEl_';
    myObj.maxEl     = 3;
    //-->
    </script>

</body>
</html>
```

MfG


----------



## Sebigf (11. Januar 2006)

Danke für deine Antwort... Ich werde mir den Code noch einmal genauer angucken.
Ehrlich gesagt verstehe ich die ganzen Elemente nicht wirklich 

Zu meiner Denkweise.

Ich habe in der Navigation jeden Eintrag als <tr> gemacht. Jedes <tr> hat eine ID die sich aus z.B. a5 zusammensetzt. Damit ist "Gruppe A" gemeint und das 5. <tr>.

Ich gehe also mit der for() schleife alle Zahlen bis 10 durch und übergebe einfach nur den Gruppen-Buchstaben.


----------



## cryo (12. Januar 2006)

Hi!

Also Du hast, sagen wir mal, 10 TRs. Dies TRs haben jeweils eine eigene ID bekommen die aus einem Buchstaben und einer Ziffer bestehen.

```
<tr id="a0">
...
<tr id="a9">
```
Nach dem ganzen TR-Zeug initialisierst Du erstmal ein neues Objekt über das Du das Ein- und Ausblenden realisieren kannst.
	
	
	



```
<script language="JavaScript" type="text/javascript">
    <!--
    myObj = new open_close();
    myObj.elIdent   = 'a';
    myObj.maxEl     = 9;
    //-->
    </script>
```

Mit 'myObj.elIdent'  sage ich meinem Objekt (oder speichere in meinem Objekt) wie die ID der TRs anfängt. In diesem Fall mit einem 'a'. Hat den Vorteil das man jetzt nur seinem Objekt noch sagen muss wieviele TRs es gibt die es bedienen soll, und der weitere Scriptablauf braucht nur noch mit Zahlen zu arbeiten. In Deinem Fall sind es 10 TRs und damit setzen wir hier eine 9, da JS bei 0 anfängt mit zählen.

So das Objekt weis jetzt mit was der erste Teil der TR-ID beginnt und wieviele TRs es gibt.

Als nächstes kommt der eigentliche Aufruf:
	
	
	



```
myObj.open(0);
```

Bedeutet ich will das das TR mit der ID 'a0' geöffnet wird. Jetzt passiert folgendes.
	
	
	



```
for( var i=0; i<this.maxEl; i++ ){
        idName = this.elIdent+i;
        if( i!=fEl ){
            document.getElementById(idName).style.display = "none";
        }else{
            document.getElementById(idName).style.display = "";
        }
    }
```

Die for-Schleife läuft solange bis i=der Anzahl TRs ist, also=maxEl das wir mit 9 bestimmt haben (JS beginnt bei 0 an mit zählen)
dann setzen wir uns die momentane ID zusammen. 'idName' entsteht aus 'elIdent' das wir mit 'a' bestimmt hatten und des momentanen Zählers 'i'. Also wäre meinetwegen die momentane ID mal mmh... sagen wir  'a3' meinetwegen. OK?
wir prüfen dann ob 'i' nicht gleich 'fEl' ist. Ist dem so dann blende das Element mit der momentan generierten (zusammengesetzten) ID aus.
'fEl' ist, erinnere Dich an den Aufruf 'myObj.open(0);', auf 0 gesetzt. bzw. haben wir die 0 an die Funktion 'open()' übergeben.
ist 'i' jedoch gleich 'fEl' (fEl wäre dann ja das Element was wir öffnen bzw. anzeigen wollen) blende das Element mit der soeben generierten (zusammengesetzten) ID ein.


So, hoffe ich konnt ein bisserl Licht ins Dunkel bringen   

MfG


----------

