Mit getElementById(); mehrere IDs ansprechen

[Sebigf]

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]

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]

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]

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>

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

 

[Sebigf]

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]

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]

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]

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]

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]

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