Mehrere Tabellen <td>'s ansprechen

[Bernd]

Hallo zusammen,
Ich habe folgendes Problem: Ich habe vor eine Tabelle zu erstellen in der ich mithilfe einer Javascript function mehrere <td>'s ein- und ausblenden kann. Mit meinem Script komme ich da aber nicht sehr weit; es basiert auf der Id eines Objektes. Das Ganze sieht wie folgt aus:

  
function toggle (control)  
  {  
  var elem = document.getElementById(control);  
  if (elem.style.display == "none")  
    {  
    elem.style.display = "block";  
    }  
  else  
    {  
    elem.style.display = "none";  
    }  
  }  

  
<table border="1" width="70%" rules="rows">  
<colgroup>  
  <col width="100%">  
</colgroup>  
  
  <tr>  
    <td><center><h1><a href="javascript:toggle('hide_1')">Überschrift</a></h1></center></td>  
  </tr>  
  <tr>  
    <td id="hide_1" style="display:none">Text der ein- ausgeblendet wird Teil 1</td>  
    <td id~~~~~~~~~ style="Display:none">Text der ein- ausgeblendet wird Teil 2</td>  
  </tr>  
</table>  

Nun, hat jemand einen Tipp wie ich mein Script umgestalten müsste damit ich es auf mehrere Objekte beziehen kann?

Bernd

[Gunnar Bittersmann]

@@Bernd:

nuqneH

Ich habe folgendes Problem: Ich habe vor eine Tabelle zu erstellen in der ich mithilfe einer Javascript function mehrere <td>'s ein- und ausblenden kann.

Beliebige einzelne Zellen? Oder ganze Tabellenzeilen bzw. -spalten?

elem.style.display = "block";

Gar keine gute Idee, Tabellenzellen/-zeilen/-spalten auf "block" zu setzen. Diese haben ihre eigenen "table-*"-Werte. Sonst ist es keine Tabellle mehr.

elem.style.display = "none";

Für Tabellenzeilen/-spalten nicht die beste Idee. Dafür gibt es 'visibility: collapse'.

<td><center><h1>

Was hat center im HTML zu suchen? Darstellungsangaben mit CSS.

Was hat h1 in einer Tabelle zu suchen? Das müffelt.

Qapla'

[Bernd]

Beliebige einzelne Zellen? Oder ganze Tabellenzeilen bzw. -spalten?

Nun, ich denke es reicht aus sich auf einzelne Zellen zu beschränken.. Damit kann ich dann ja falls nötig auch eine ganze Zeile ein- / ausblenden.

elem.style.display = "block";
Gar keine gute Idee, Tabellenzellen/-zeilen/-spalten auf "block" zu setzen. Diese haben ihre eigenen "table-*"-Werte. Sonst ist es keine Tabellle mehr.

Okay.. aber das "Experiment" mit 'block' ist geglückt.. Ein- und ausblenden klappt damit schon. Fehlt eben nur noch die Idee die Javascript function auf mehrere Elemente auszuweiten..

<td><center><h1>
Was hat center im HTML zu suchen? Darstellungsangaben mit CSS.

Schlicht und einfach um ein ungefähres Layout zu erstellen um abzuschätzen wie das ganze Gerüst dann aussehen wird... CSS ist der "feinschliff" ;-)

Was hat h1 in einer Tabelle zu suchen? Das müffelt.

Was ist falsch daran die Überschrift einer Tabelle mit <h~> in die erste Zeile zu schreiben?
  Bin nicht gerade ein Fan von <thead>, <tfoot> und <tbody>..

Deine Mühe in Ehren aber dennoch bin ich so schlau wie zuvor..
Gesucht ist eine Möglichkeit eine function toggle auf mehrere Elemente zu beziehen. Mein Versuch mit getElementById() funktioniert ja bekannter Weise nur bei einem einzigen Element..

Bernd

[MudGuard]

Hi,

Okay.. aber das "Experiment" mit 'block' ist geglückt..

Zufällig. Eine Tabellenzelle sollte display: table-cell haben.

Was ist falsch daran die Überschrift einer Tabelle mit <h~> in die erste Zeile zu schreiben?

Die Tatsache, daß es dafür caption gibt.

Deine Mühe in Ehren aber dennoch bin ich so schlau wie zuvor..
Gesucht ist eine Möglichkeit eine function toggle auf mehrere Elemente zu beziehen. Mein Versuch mit getElementById() funktioniert ja bekannter Weise nur bei einem einzigen Element..

Man kann einer function z.B. mehr als einen Parameter (also z.B. mehrere IDs) übergeben. Dann halt mehrfach getElementById usw.

Man könnte auch den betroffenen Zellen eine Klasse togglecell geben, und der Tabelle je nach toggle-Stand eine andere Klasse (toggleon).

Das eigentliche Ausblenden erfolgt dann per CSS:

  
.togglecell { display: none; }  
.toggleon .togglecell { display: table-cell; }  

cu,
Andreas

[molily]

Hallo,

hat jemand einen Tipp wie ich mein Script umgestalten müsste damit ich es auf mehrere Objekte beziehen kann?

Du lässt die Funktion eine beliebige Anzahl von Parametern entgegen nehmen. Jeder Parameter ist eine Element-ID. Die Parameterliste kann leer sein. Auf die tatsächlich übergebenen Parameter kannst du mit der http://de.selfhtml.org/javascript/objekte/function.htm#arguments@title=arguments-Liste zugreifen.

Diese durchläufst du mit einer http://de.selfhtml.org/javascript/sprache/schleifen.htm#for@title=for-Schleife. Für jede ID holst du dir das zugehörige Element. Dann toggelst du die Inline-Styles.

var toggle = function() {  
  for (var i = 0, l = arguments.length; i < l; i++) {  
    var id = arguments[i];  
    var el = document.getElementById(id);  
    if (!el) continue;  
    var style = el.style;  
    if (style.display == 'none') {  
      // Lösche den Inline-Style, sodass wieder die Standard-Styles gelten.  
      style.display = '';  
    } else {  
      style.display = 'none';  
    }  
  }  
};  
toggle('id1', 'id2', 'id3', …);

Dasselbe geht natürlich mit einer Klasse (http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#universaleigenschaften@title=className-Eigenschaft), für die du entsprechende Styles vergibst.

Mathias

[Bernd]

var toggle = function() {

for (var i = 0, l = arguments.length; i < l; i++) {
    var id = arguments[i];
    var el = document.getElementById(id);
    if (!el) continue;
    var style = el.style;
    if (style.display == 'none') {
      // Lösche den Inline-Style, sodass wieder die Standard-Styles gelten.
      style.display = '';
    } else {
      style.display = 'none';
    }
  }
};

  
Ja! Danke, klappt mit diesem Script super!  
  
Bernd