Zeilen ausblenden mit Javascript

mschaer · 17.12.2009, 16:11

Abend,

Ich versuche, mit Javascript einzelne Zeilen auszublenden. Dabei gebe ich den "tr", die ausgebelndet werden sollen, dieselbe id.

Leider wird dann immer nur die erste Zeile ausgeblendet, und nicht alle, die diese id haben.

Hier das javascript:

Code:

function showTable(obj) 
      {
      var el = document.getElementById(obj);
      if ( el.style.display != 'none' ) 
          {
          el.style.display = 'none';
          }
      else 
          {
          el.style.display = '';
          }
      }

Anhand einer Schleife erzeuge ich mehrere "tr", die dann folgendermassen rauskommen:

Code:

<tr height="30" id="mytable" class="tableclass" ><td>inhalt</td></tr>

Und dann gibts einen Link, um dieFunktion auszuführen:

Code:

<a href="#" onClick="showTable('Inactive');">Link</a>

Wer hat mir einen Tipp, warum die Id immer nur in der ersten Zeile funzt, oder wie ich das sonst lösen kann?

Gruss
Michael

nikosch · 17.12.2009, 16:14

ID = Identifier. Eine ID muß dokumentweit eindeutig, d.h. einmalig sein.

mschaer · 17.12.2009, 16:51

Ja, das hatte ich ja schon vermutet. Wie könnte ich das Problem aber lösen?

nikosch · 17.12.2009, 17:20

Mit dem class-Attribut und einer Javascript-Bibliothek wie jQuery. Alternativ einer getElementsByClass-Implementierung (nicht nativ in JS enthalten).

mschaer · 17.12.2009, 18:41

Danke, werde mir das mal anschauen.

draco88 · 17.12.2009, 23:15

In prototype wärs z.b.

Code:

$$('.class').invoke('toggle');

Damit werden dann alle Elemente mit der Klasse 'class' ein- bzw ausgeblendet.

lg
draco

nikosch · 17.12.2009, 23:28

Und in jQuery

Code:

$('.class').toggle();

mschaer · 18.12.2009, 09:55

Zitat:

Zitat von draco88

In prototype wärs z.b.

Code:

$$('.class').invoke('toggle');

Damit werden dann alle Elemente mit der Klasse 'class' ein- bzw ausgeblendet.

lg
draco

Perfekt!
Geht nicht einfacher, danke!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
timing Probleme bzw Zusammenspiel PHP Javascript	thica	PHP Tipps 2009	2	19.02.2010 19:06
[Erledigt] Leere Zeilen ignorieren?	BlackScorp	PHP Tipps 2009	8	15.10.2009 09:45
[Erledigt] Ersatz für Javascript	Mort1ferus	JavaScript, Ajax und mehr	6	12.10.2009 09:35
Wie lade ich ein Javascript nach einer AJAX Abfrage neu?	da.eXecutoR	JavaScript, Ajax und mehr	3	21.09.2009 11:15
[Erledigt] Ist das ok, wenn eine Webseite nur in PHP ist und komplett auf JavaScript	coffeyn	Off-Topic Diskussionen	15	21.08.2009 15:11
Ein und Ausblenden (Javascript) mit PHP koppeln	Tyrra	PHP Tipps 2009	2	28.07.2009 13:27
[Erledigt] Variable von Javascript mit 1x1px-Bild an PHP übergeben	beneblack	PHP Tipps 2009	18	03.05.2009 22:40
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06
[Erledigt] Javascript in PHP Aufrufen	coyboc	PHP Tipps 2009	17	10.04.2009 15:28
1101: 10x JavaScript und kein Ende ist abzusehen…	Nikolaus 2.0	Adventskalender 2008	9	13.12.2008 20:11
PHP + Javascript + MYSQL	socke	PHP Tipps 2006	4	02.04.2006 22:02
[Erledigt] Javascript Aufklappen/Zuklappen		HTML, Usability und Barrierefreiheit	5	13.12.2005 14:06
JavaScript in JavaScript geschriebene Html-Datei einbinden.	woods	HTML, Usability und Barrierefreiheit	6	06.09.2004 18:33
Javascript		HTML, Usability und Barrierefreiheit	5	31.08.2004 18:30

17.12.2009, 16:11
mschaer Benutzer Registriert seit: 04.06.2009 Beiträge: 37 PHP-Kenntnisse: Fortgeschritten	Zeilen ausblenden mit Javascript Abend, Ich versuche, mit Javascript einzelne Zeilen auszublenden. Dabei gebe ich den "tr", die ausgebelndet werden sollen, dieselbe id. Leider wird dann immer nur die erste Zeile ausgeblendet, und nicht alle, die diese id haben. Hier das javascript: Code: function showTable(obj) { var el = document.getElementById(obj); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } } Anhand einer Schleife erzeuge ich mehrere "tr", die dann folgendermassen rauskommen: Code: <tr height="30" id="mytable" class="tableclass" ><td>inhalt</td></tr> Und dann gibts einen Link, um dieFunktion auszuführen: Code: <a href="#" onClick="showTable('Inactive');">Link</a> Wer hat mir einen Tipp, warum die Id immer nur in der ersten Zeile funzt, oder wie ich das sonst lösen kann? Gruss Michael


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

17.12.2009, 16:14
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	ID = Identifier. Eine ID muß dokumentweit eindeutig, d.h. einmalig sein. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

17.12.2009, 16:51
mschaer Benutzer Registriert seit: 04.06.2009 Beiträge: 37 PHP-Kenntnisse: Fortgeschritten	Ja, das hatte ich ja schon vermutet. Wie könnte ich das Problem aber lösen?

17.12.2009, 17:20
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Mit dem class-Attribut und einer Javascript-Bibliothek wie jQuery. Alternativ einer getElementsByClass-Implementierung (nicht nativ in JS enthalten). __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

17.12.2009, 18:41
mschaer Benutzer Registriert seit: 04.06.2009 Beiträge: 37 PHP-Kenntnisse: Fortgeschritten	Danke, werde mir das mal anschauen.

17.12.2009, 23:15
draco88 Erfahrener Benutzer Registriert seit: 01.12.2009 Beiträge: 645 PHP-Kenntnisse: Fortgeschritten	In prototype wärs z.b. Code: $$('.class').invoke('toggle'); Damit werden dann alle Elemente mit der Klasse 'class' ein- bzw ausgeblendet. lg draco

17.12.2009, 23:28
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Und in jQuery Code: $('.class').toggle(); __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (21.12.2009 um 18:47 Uhr).