tag:forum.selfhtml.org,2005:/self zeilen und spalten einer tabelle ein- und ausblenden lassen – SELFHTML-Forum 2006-06-23T06:32:57Z https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986098?srt=yes#m986098 Roger rehnelt@gmx.net 2006-06-21T16:03:47Z 2006-06-21T16:03:47Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>moin!</p> <p>ich möchte eine tabelle darstellen. der übersichtlichkeit halber, würde ich gern den user diverse zeilen und spalten ausblenden lassen. kann man sowas bewerkstelligen? (muss ja keine tabelle sein, nur die tabellarische übersicht muss erhalten bleiben.)<br> wie gehe ich da am besten vor?</p> <p>gruß.<br> roger.</p> <div class="signature">-- <br> meine freundin sagt, ich wäre neugierig.<br> so steht's zumindest in ihrem tagebuch. </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986099?srt=yes#m986099 berdn web@strich-komma.de 2006-06-21T16:08:00Z 2006-06-21T16:08:00Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hallo Roger,</p> <p>ich würde mir mal display: none anschauen, dazu noch ein wenig JS.</p> <p>Liebe Grüße,</p> <p>Bernd</p> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986100?srt=yes#m986100 Roger rehnelt@gmx.net 2006-06-21T16:15:17Z 2006-06-21T16:15:17Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>moin!</p> <blockquote> <p>ich würde mir mal display: none anschauen, dazu noch ein wenig JS.</p> </blockquote> <p>schon klar, aber lassen sich td's einfach so ausblenden? die frage ist dann, wie koordiniert man das (komando "spalte x ausblenden" oder "zeile y ausblenden")?</p> <p>gruß.<br> roger.</p> <div class="signature">-- <br> meine freundin sagt, ich wäre neugierig.<br> so steht's zumindest in ihrem tagebuch. </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986117?srt=yes#m986117 berdn web@strich-komma.de 2006-06-21T16:25:57Z 2006-06-21T16:25:57Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hallo Roger,</p> <p>ausprobieren ;-)</p> <p>Weise jedem TR und jedem TD eine Klasse zu.</p> <p><tr class="reihe1"><br> <td class="spalte1"></td><br> <td class="spalte2"></td><br> <td class="spalte3"></td><br> <td class="spalte4"></td><br> </tr><br> <tr class="reihe2"></p> <p>Dann baust Du noch eine Schleife in dem Du nach dem Objekt mit der gewünschten Klasse suchst, und dann via JS die CSS Eigenschaft änderst.</p> <p>Ich habe es jetzt nicht ausprobiert, ist schließlich Dein projekt ;-)</p> <p>Müßte aber klappen.</p> <p>Liebe Grüße,</p> <p>Bernd</p> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986101?srt=yes#m986101 DeWitt dew1tt@gmx.de http://www.dewitt-design.de 2006-06-21T17:00:17Z 2006-06-21T17:00:17Z zeilen und spalten einer tabelle ein- und ausblenden lassen <blockquote> <p>moin!</p> <blockquote> <p>ich würde mir mal display: none anschauen, dazu noch ein wenig JS.</p> </blockquote> <p>schon klar, aber lassen sich td's einfach so ausblenden? die frage ist dann, wie koordiniert man das (komando "spalte x ausblenden" oder "zeile y ausblenden")?</p> </blockquote> <p>Mit CSS wurde ja schon eine Lösung angeboten (find ich fast schöner wie meine), aber falls dir Javascript auch recht ist:</p> <pre><code class="block language-javascript"> <span class="token keyword">var</span> tabid <span class="token operator">=</span> <span class="token string">'tab1'</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">toggleCol</span> <span class="token punctuation">(</span><span class="token parameter">iNumber</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> <span class="token constant">TABLE</span> <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>tabid<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> <span class="token constant">TR</span> <span class="token operator">=</span> <span class="token constant">TABLE</span><span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"tr"</span><span class="token punctuation">)</span><span class="token punctuation">[</span>iNumber<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token constant">TR</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">==</span> <span class="token string">'none'</span><span class="token punctuation">)</span> <span class="token constant">TR</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">else</span> <span class="token constant">TR</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">toggleRow</span> <span class="token punctuation">(</span><span class="token parameter">iNumber</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> <span class="token constant">TABLE</span> <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>tabid<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> TRs <span class="token operator">=</span> <span class="token constant">TABLE</span><span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"tr"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> <span class="token constant">TH</span> <span class="token operator">=</span> TRs<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"th"</span><span class="token punctuation">)</span><span class="token punctuation">[</span>iNumber<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token constant">TH</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">==</span> <span class="token string">'none'</span><span class="token punctuation">)</span> <span class="token constant">TH</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">else</span> <span class="token constant">TH</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</span><span class="token punctuation">;</span> <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span>i<span class="token operator"><</span>TRs<span class="token punctuation">.</span>length<span class="token punctuation">;</span>i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> <span class="token constant">TD</span> <span class="token operator">=</span> TRs<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"td"</span><span class="token punctuation">)</span><span class="token punctuation">[</span>iNumber<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token constant">TD</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">==</span> <span class="token string">'none'</span><span class="token punctuation">)</span> <span class="token constant">TD</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">else</span> <span class="token constant">TD</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Mit diesen Funktionen kannst du folgende Tabelle modifizieren:</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TABLE</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tab1<span class="token punctuation">"</span></span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">cellspacing</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">cellpadding</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TR</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TH</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="&nbsp;">&nbsp;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TH</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TH</span><span class="token punctuation">></span></span>Spalte 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TH</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TH</span><span class="token punctuation">></span></span>Spalte 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TH</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TR</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TR</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TH</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tha<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">border</span><span class="token punctuation">:</span>1 solid red<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>Zeile a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TH</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TD</span><span class="token punctuation">></span></span>Wert 1a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TD</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TD</span><span class="token punctuation">></span></span>Wert 2a<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TD</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TR</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TR</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TH</span><span class="token punctuation">></span></span>Zeile b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TH</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TD</span><span class="token punctuation">></span></span>Wert 1b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TD</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TD</span><span class="token punctuation">></span></span>Wert 2b<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TD</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TR</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>TABLE</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>A</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:toggleRow(1);<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Spalte 1 ein/aus<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>A</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>A</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:toggleRow(2);<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Spalte 2 ein/aus<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>A</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>BR</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>A</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:toggleCol(1);<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zeile a ein/aus<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>A</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>A</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>javascript:toggleCol(2);<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zeile b ein/aus<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>A</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986115?srt=yes#m986115 Roger rehnelt@gmx.net 2006-06-21T17:49:38Z 2006-06-21T17:49:38Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>moin!</p> <p>klappt super. wobei ich mehr zur <a href="https://forum.selfhtml.org/?t=131723&m=852137" rel="noopener noreferrer">css-variante</a> tendiere. javascript muss in beiden varianten ja verwendet werden. allerdings ist es bei der css-variante weitaus weniger. wobei aber wieder in deinem beipiel ich nicht jede zeile mit klassen/ids versehen muss...</p> <p>wer die wahl hat...</p> <p>gruß.<br> roger.</p> <div class="signature">-- <br> meine freundin sagt, ich wäre neugierig.<br> so steht's zumindest in ihrem tagebuch. </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986102?srt=yes#m986102 Roger rehnelt@gmx.net 2006-06-22T11:15:58Z 2006-06-22T11:15:58Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>moin!</p> <p>ich habe dein script mal etwas erweitert da ich gut damit zurecht komme. um javascript kann ich eh keinen boden machen, auch nicht bei gunnar's variante. und zwar habe ich das jetzt soweit aufgebohrt, dass ich mehrere zeilen ein und ausblenden kann.</p> <p>(momentan erst mal nur die zeilen - keine spalten)</p> <pre><code class="block language-javascript"> <span class="token keyword">function</span> <span class="token function">toggleRow</span> <span class="token punctuation">(</span><span class="token parameter">Start<span class="token punctuation">,</span> Stop</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span><span class="token punctuation">(</span>iNumber<span class="token operator">=</span>Start<span class="token punctuation">;</span>iNumber<span class="token operator"><=</span>Stop<span class="token punctuation">;</span>iNumber<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> <span class="token constant">TABLE</span> <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>tabid<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> <span class="token constant">TR</span> <span class="token operator">=</span> <span class="token constant">TABLE</span><span class="token punctuation">.</span><span class="token function">getElementsByTagName</span><span class="token punctuation">(</span><span class="token string">"tr"</span><span class="token punctuation">)</span><span class="token punctuation">[</span>iNumber<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token constant">TR</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">==</span> <span class="token string">'none'</span><span class="token punctuation">)</span> <span class="token constant">TR</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">''</span><span class="token punctuation">;</span> <span class="token keyword">else</span> <span class="token constant">TR</span><span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">'none'</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>übergeben wird hier die start- und stop-zeile. das macht sich gut für meine kategorieübersicht:</p> <ul> <li>kategorie stufe 1<br>    + kategorie stufe 2<br>       + kategorie stufe 3<br>          kategorie stufe 4</li> </ul> <p>soweit das vereinfachte modell. ich hab's gern etwas komplizierter:</p> <ul> <li>kategorie stufe 1<br>    + kategorie stufe 2.1<br>       + kategorie stufe 3.1<br>          kategorie stufe 4.1<br>          kategorie stufe 4.2<br>          kategorie stufe 4.3<br>       + kategorie stufe 3.2<br>          kategorie stufe 4.1<br>          kategorie stufe 4.2<br>    + kategorie stufe 2.2<br>       + kategorie stufe 3.1<br> [...]</li> </ul> <p>jede stufe mit einem + (also 1-3) möchte ich zusammen und auseinander klappen lassen (ala explorer). leider kommt etwas verwirrung in die sache, wenn ich jetzt als erstes stufe 3 einklappe (z.b. zeile 4 bis 6) und anschließend stufe 1, ist der stop-wert bei stufe 1 niedriger, als wenn stufe 3 augeklappt ist :(</p> <p>kann ich den stop-wert dynamisch ändern?</p> <p>gruß.<br> roger.</p> <div class="signature">-- <br> meine freundin sagt, ich wäre neugierig.<br> so steht's zumindest in ihrem tagebuch. </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986103?srt=yes#m986103 Cybaer cybaer@binon.net http://Coding.binon.net 2006-06-22T11:30:28Z 2006-06-22T11:30:28Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hi,</p> <blockquote> <p>ich habe dein script mal etwas erweitert da ich gut damit zurecht komme. um javascript kann ich eh keinen boden machen, auch nicht bei gunnar's variante. und zwar habe ich das jetzt soweit aufgebohrt, dass ich mehrere zeilen ein und ausblenden kann.<br> (momentan erst mal nur die zeilen - keine spalten)</p> </blockquote> <p>BTW: Unter <a href="http://Coding.binon.net/Toggle" rel="nofollow noopener noreferrer">Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe</a> findest Du ein Script, mit dem man so etwas machen kann. Beachte das 3. Beispiel, das auch mit einer Spalte arbeitet.</p> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986104?srt=yes#m986104 Roger rehnelt@gmx.net 2006-06-22T12:02:20Z 2006-06-22T12:02:20Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>moin!</p> <blockquote> <p>BTW: Unter <a href="http://Coding.binon.net/Toggle" rel="nofollow noopener noreferrer">Coding: Darstellungswechsel - Un-/Sichtbare Elemente: Ein-/Ausklappen, Verstecken, Transparenz, Farbe</a> findest Du ein Script</p> </blockquote> <p>gefunden! ein traum! danke!<br> aber wie gesagt, das mit dem kompliziert machen...<br> ich möchte nicht extra 2 buttons nutzen um aus- und einzuklappen, sondern nur einen.<br> ich nutze momentan <code class="language-javascript">onClick<span class="token operator">=</span><span class="token string">"toggle('fold','tr:id','zeileA1');"</span></code> auf "tr" um die tabellenzeilen einzuklappen. kann ich aus 'fold' 'unfold' zaubern? :)</p> <p>gruß.<br> roger.</p> <div class="signature">-- <br> meine freundin sagt, ich wäre neugierig.<br> so steht's zumindest in ihrem tagebuch. </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986105?srt=yes#m986105 Cybaer cybaer@binon.net http://Coding.binon.net 2006-06-22T12:20:43Z 2006-06-22T12:20:43Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hi,</p> <blockquote> <p>ich möchte nicht extra 2 buttons nutzen um aus- und einzuklappen, sondern nur einen.</p> </blockquote> <p>Ja. Beachte die "Komplementär-Funktionalität", die auf die angegebene Ausnahme-Elemente genau das Gegenteil macht - falls Du das meinst.</p> <blockquote> <p>ich nutze momentan <code class="language-javascript">onClick<span class="token operator">=</span><span class="token string">"toggle('fold','tr:id','zeileA1');"</span></code> auf "tr" um die tabellenzeilen einzuklappen. kann ich aus 'fold' 'unfold' zaubern? :)</p> </blockquote> <p>Du kannst mit</p> <ul> <li><code class="language-javascript">onClick<span class="token operator">=</span><span class="token string">"toggle('unfold','tr:id','zeileA1');"</span></code> alle TRs ausklappen, deren IDs mit "zeileA1" beginnen, oder mit</li> <li><code class="language-javascript">onClick<span class="token operator">=</span><span class="token string">"toggle('unfold','tr:id','zeile','A1');"</span></code> alle TRs ausklappen, deren IDs mit "zeile" beginnen, mit Ausnahme der TR mit der ID "zeileA1" - die wird nicht angefaßt, oder mit</li> <li><code class="language-javascript">onClick<span class="token operator">=</span><span class="token string">"toggle('unfold','tr:id','zeile','A1',true);"</span></code> das gleiche machen, nur daß eben "zeileA1" jetzt nicht mehr ignoriert, sondern komplementär behandelt wird - "zeileA1" wird also, wie bei deinem Originalaufruf, eingeklappt. Das ist dann "fold" & "unfold" in einem Aufruf, statt in zweien.</li> </ul> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986106?srt=yes#m986106 Roger rehnelt@gmx.net 2006-06-22T12:36:34Z 2006-06-22T12:36:34Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>moin!</p> <p>oh.. ähm.. das war mir jetzt alles zu komplimentär...<br> ich habe eine tabellenzeile (stufe 1), die gleichzeitig als button gelten soll. wenn ich drauf klicke, sollen alle kategorien unterhalb stufe 1 eingeklappt _und_ wieder ausgeklappt werden können (nach erneutem klick).</p> <p>meine tr-ids hab ich jetzt nach den kategorien benannt:<br> 1: zeile1<br> 2: zeile11<br> 3: zeile111<br> 4: zeile112<br> 5: zeile113<br> 6: zeile12<br> 7: zeile2<br> ...</p> <p>um alles was in der kategorie stufe 1 liegt einzuklappen nutze ich<br> <code class="language-javascript"><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'fold'</span><span class="token punctuation">,</span><span class="token string">'tr:id'</span><span class="token punctuation">,</span><span class="token string">'zeile1'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code><br> leider klappt auch die angeklickte zeile (zeile1) weg - war wohl doch besser zusätzlich mit  buchstaben arbeiten...</p> <p>btw: die tips waren gut. damit lässt sich ne menge anstellen.</p> <p>gruß.<br> roger.</p> <div class="signature">-- <br> meine freundin sagt, ich wäre neugierig.<br> so steht's zumindest in ihrem tagebuch. </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986107?srt=yes#m986107 Cybaer cybaer@binon.net http://Coding.binon.net 2006-06-22T13:02:55Z 2006-06-22T13:02:55Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hi,</p> <blockquote> <p>um alles was in der kategorie stufe 1 liegt einzuklappen nutze ich<br> <code class="language-javascript"><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'fold'</span><span class="token punctuation">,</span><span class="token string">'tr:id'</span><span class="token punctuation">,</span><span class="token string">'zeile1'</span><span class="token punctuation">,</span> <span class="token string">'1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code><br> leider klappt auch die angeklickte zeile (zeile1) weg</p> </blockquote> <p>Der Code bedeutet: Verstecke alle TRs mit den IDs "zeile1*". Die TR mit der ID "zeile11" soll nicht versteckt werden.<br> Wenn Du alle "zeile1*" (also "zeile1MitIrgendwasDahinter" ;-)) verstecken möchtest, aber (exakt) "zeile1" (ohne was dahinter ;-)) nicht, dann mußt Du anders vorgehen. Entweder neue Namen überlegen, oder, hey, eben diese ID separat behandeln:</p> <p><code class="language-javascript"><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'fold'</span><span class="token punctuation">,</span><span class="token string">'tr:id'</span><span class="token punctuation">,</span><span class="token string">'zeile1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'unfold'</span><span class="token punctuation">,</span><span class="token string">'zeile1'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></p> <p>Hier werden alle TRs versteckt, deren ID mit "zeile1" beginnen - also auch die exakte ID "zeile1" ohne was dahinter. Im 2. Aufruf wird dann genau diese ID wieder angezeigt.</p> <p>Mag aber sein (zumindest käme es von der Logik her hin, daß Du einfach eine "leere Ausnahme" angibst. Denn die real behandelte ID ergibt sich ja aus "ID-Anfang" + "ID-Anhang". Wenn "zeile11" ausgenommen werden sollte, ist "zeile1" der Anfang und "1" der Anhang, macht zusammen "zeile1"+"1"="zeile11". Soll die (Gesamt-)ID "zeile1" ausgenommen werden dann könnte man auch den Anfang "zeile1" und den Anhang "" nehmen. Also</p> <p><code class="language-javascript"><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'fold'</span><span class="token punctuation">,</span><span class="token string">'tr:id'</span><span class="token punctuation">,</span><span class="token string">'zeile1'</span><span class="token punctuation">,</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></p> <p>Also: Klappe alles ein, was mit "zeile11" beginnt, aber nicht das Element mit der ID "zeile1"+""="zeile1"</p> <p>Aber ich weiß nicht, ob das klappt ... :)</p> <p>... könnte aber. 8-)</p> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986108?srt=yes#m986108 Roger rehnelt@gmx.net 2006-06-22T13:13:48Z 2006-06-22T13:13:48Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>moin!</p> <blockquote> <p><code class="language-javascript"><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'fold'</span><span class="token punctuation">,</span><span class="token string">'tr:id'</span><span class="token punctuation">,</span><span class="token string">'zeile1'</span><span class="token punctuation">,</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></p> </blockquote> <p>klappt mit der klappe.</p> <p>steht jetzt nur noch die frage im raum, ob ich mit ein und dem selben button (in meinem fall die tabellenzeile, s.o.) auch wieder aufklappen kann. klappiert?</p> <p>gruß.<br> roger.</p> <div class="signature">-- <br> meine freundin sagt, ich wäre neugierig.<br> so steht's zumindest in ihrem tagebuch. </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986109?srt=yes#m986109 Cybaer cybaer@binon.net http://Coding.binon.net 2006-06-22T13:28:40Z 2006-06-22T13:28:40Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hi,</p> <blockquote> <blockquote> <p><code class="language-javascript"><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'fold'</span><span class="token punctuation">,</span><span class="token string">'tr:id'</span><span class="token punctuation">,</span><span class="token string">'zeile1'</span><span class="token punctuation">,</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code><br> klappt mit der klappe.</p> </blockquote> </blockquote> <p>Dann habe ich wohl gut programmiert. ;-)</p> <blockquote> <p>steht jetzt nur noch die frage im raum, ob ich mit ein und dem selben button (in meinem fall die tabellenzeile, s.o.) auch wieder aufklappen kann. klappiert?</p> </blockquote> <p>Yep, klappiert. :)</p> <p>Antwort: Nicht direkt, aber indirekt. ;-)</p> <p>Mach halt <code class="language-javascript"><span class="token function">toggle</span><span class="token punctuation">(</span>klappe<span class="token punctuation">,</span><span class="token string">'tr:id'</span><span class="token punctuation">,</span><span class="token string">'zeile1'</span><span class="token punctuation">,</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span> klappe<span class="token operator">=</span><span class="token punctuation">(</span>klappe<span class="token operator">==</span><span class="token string">"fold"</span><span class="token punctuation">)</span><span class="token operator">?</span><span class="token string">"unfold"</span><span class="token operator">:</span><span class="token string">"fold"</span></code>, wobei klappe ein Stringvariable ist, die anfangs mit "fold" initialisiert wurde - und nach toggle() den Wert wechselt.</p> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986110?srt=yes#m986110 Roger rehnelt@gmx.net 2006-06-22T13:54:52Z 2006-06-22T13:54:52Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>moin!</p> <p>jetzt fehlte nur noch die verarbeitung für mehrere zeilen, den "fold" und "unfold" musste ja pro zeile gespeichert werden und nicht einmal global :)<br> dabei hilft mir ein array:</p> <pre><code class="block language-javascript"> <span class="token operator"><</span>script type<span class="token operator">=</span><span class="token string">"text/javascript"</span> language<span class="token operator">=</span><span class="token string">"JavaScript"</span><span class="token operator">></span> <span class="token keyword">var</span> klappe <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">folding</span><span class="token punctuation">(</span><span class="token parameter">stelle</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>klappe<span class="token punctuation">[</span>stelle<span class="token punctuation">]</span><span class="token operator">==</span><span class="token string">"fold"</span><span class="token punctuation">)</span> klappe<span class="token punctuation">[</span>stelle<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"unfold"</span><span class="token punctuation">;</span> <span class="token keyword">else</span> klappe<span class="token punctuation">[</span>stelle<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"fold"</span><span class="token punctuation">;</span> <span class="token keyword">return</span> klappe<span class="token punctuation">[</span>stelle<span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> </code></pre> <p>^^ in den body bereich</p> <p>und pro zeile nehme ich einfach eine stelle im array (am besten analog zur zeilenzahl):</p> <p><code class="language-javascript">onClick<span class="token operator">=</span><span class="token string">"toggle(folding(1),'tr:id','zeile1', '');"</span></code></p> <p>mit der vereinfachten if-syntax habe ich es leider nicht hinbekommen :(</p> <p>gruß.<br> roger.</p> <div class="signature">-- <br> meine freundin sagt, ich wäre neugierig.<br> so steht's zumindest in ihrem tagebuch. </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986111?srt=yes#m986111 Cybaer cybaer@binon.net http://Coding.binon.net 2006-06-22T14:40:49Z 2006-06-22T14:40:49Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hi,</p> <blockquote> <p>dabei hilft mir ein array:</p> </blockquote> <p>Auch 'ne Möglichkeit.</p> <p>Aber als "assoziatives Array" (sprich: Object) mit der ID als Schlüssel ist es vielleicht sinnvoller. Am einfachsten ist aber: Direkt als Objekt des jeweiligen (TR-)Elements!</p> <p>Beispiel:</p> <p>document.getElementById("zeile1").klappe="fold";<br> alert(document.getElementById("zeile1").klappe)</p> <p>Vorgehensweise: Zur Initialisierung alle TRs durchgehen (schneller: nur die TRs der bewußten Tabelle). Ist es eine "zu klappende TR" (Eigenschaft id hat z.B. einen passenden Wert), dann verpaßt man der TR zum einen den passenden Eventhandler (onclick mit einer Funktion, die den toggle()-Aufruf enthält) und zum anderen, s.o., das "Status-Objekt" klappe.</p> <p>Die "onclick-Funktion" hat dann neben dem toggle()-Aufruf noch die "Wechsel-Syntax", die einheitlich so aussehen kann:</p> <p>this.klappe=(this.klappe=="fold")?"unfold":"fold"</p> <p>(this ist der Verweis auf das Element des onClicks, also die jeweilge TR)</p> <p>Ist schön kurz & elegant, im HTML-Code ist nichts mehr von der Klapperei zu sehen (außer, daß die Elemente eine ID haben), und molily hat wieder ein schönes Beispiel fürs "Unobtrusive JavaScript" ... ;)</p> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986112?srt=yes#m986112 Cybaer cybaer@binon.net http://Coding.binon.net 2006-06-22T14:51:39Z 2006-06-22T14:51:39Z zeilen und spalten einer tabelle ein- und ausblenden lassen <blockquote> <p>Die "onclick-Funktion" hat dann neben dem toggle()-Aufruf</p> </blockquote> <p>Der sieht dann natürlich anders aus, z.B. so:</p> <p>toggle(this.klappe,'tr:id',this.id,'');</p> <p>this.klappe ist der Verweis auf das "Status-Objekt" und this.id der Verweis auf die ID der jeweiligen TR. Wenn also der HTML-Code <tr id="zeile1"> lautet, man beim Init mit onclick eine Funktion anhängt und mit klappe den Status auf "fold" setzt, dann hat man beim Klick auf die TR mit der ID "zeile1" einen toggle()-Aufruf der so aussieht:</p> <p>toggle("fold",'tr:id',"zeile1",'');</p> <p>Der Status wird danach gewechselt und der nächste Klick kann kommen. ;-)</p> <p>Einheitliche Syntax für alle Zeilen und ohne JS im HTML-Code ...</p> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986113?srt=yes#m986113 Roger rehnelt@gmx.net 2006-06-22T17:11:41Z 2006-06-22T17:11:41Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>moin!</p> <p>so langsam wird's heller. ich hab zwar schon was funktionierendes, würde aber trotzdem gern verstehen, was du meinst. könntest du es nicht evtl. an einem kurzen beispielscript erklären? der ein oder andere wird es dir sicherlich danken :)</p> <p>ansonsten halte ich jetzt erst mal this.klappe.</p> <p>gruß.<br> roger.</p> <div class="signature">-- <br> meine freundin sagt, ich wäre neugierig.<br> so steht's zumindest in ihrem tagebuch. </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986114?srt=yes#m986114 Cybaer cybaer@binon.net http://Coding.binon.net 2006-06-23T06:32:57Z 2006-06-23T06:32:57Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hi,</p> <blockquote> <p>ich hab zwar schon was funktionierendes, würde aber trotzdem gern verstehen, was du meinst.</p> </blockquote> <p>Lobenswert - denn mindestens fürs nächste Mal ist man schlauer. ;)</p> <blockquote> <p>könntest du es nicht evtl. an einem kurzen beispielscript erklären?</p> </blockquote> <p>Das ist ja Arbeit! =;-) Im Ernst: Gerade so viel an der Backe, daß schon das Posten hier Luxus ist.</p> <p>Der HTML-Code ist genannt: <tr id="zeile1"></p> <p>Eine Schleife, um alle TRs anzusprechen dürfte bekannt sein.</p> <p>Bliebe noch der Umstand wie man in einer Init-Funktion die Events setzt?</p> <p>// In einer Schleife alle TR-Objekte durchgehen<br> obj=document.getElement...<br> // Feststellen, ob zu klappender TR<br> if(obj.id==...) { // Könnte konkret z.B. sein if(obj.id=="zeile1") - da ist dann eine sinnvolle, diesbezügl. leicht zu verwendende Vergabe der IDs gefordert, sowie ein arbeiten mit passenden Stringfunktionen<br>  obj.onclick=callToggle;<br> }<br> // Schleife von vorn bis alle Elemente durch</p> <p>Und dann sollte es natürlich noch die Funktion callToggle() geben:</p> <p>function callToggle() {<br>   // Ist sinnvoller, Wechsel von klappe toggle() voranzustellen - das spart die Initialisierung (klappe==""->"fold"->"unfold"->"fold"->...<br>   this.klappe=(this.klappe=="fold")?"unfold":"fold";<br>   toggle(this.klappe,'tr:id',this.id,'');<br> }</p> <blockquote> <p>ansonsten halte ich jetzt erst mal this.klappe.</p> </blockquote> <p>:)</p> <p>Wenn's geht, versuch's doch mal hinzukriegen, und/oder gib mir den URL deiner soweit funktionierenden realen Seite (oder den Code selbst). Dann muß ich mir kein Beispiel ausdenken, sondern kann es "In der Realität" gleich durchziehen ...</p> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986116?srt=yes#m986116 DeWitt dew1tt@gmx.de http://www.dewitt-design.de 2006-06-21T17:54:35Z 2006-06-21T17:54:35Z zeilen und spalten einer tabelle ein- und ausblenden lassen <blockquote> <p>wobei aber wieder in deinem beipiel ich nicht jede zeile mit klassen/ids versehen muss...</p> </blockquote> <p>siehe <a href="http://de.selfhtml.org/javascript/objekte/node.htm#get_elements_by_tag_name@title=NODE-Beschreibung" rel="nofollow noopener noreferrer">http://de.selfhtml.org/javascript/objekte/node.htm#get_elements_by_tag_name@title=NODE-Beschreibung</a>, ist ja eigentlich nicht besonders schwer ;)</p> <blockquote> <p>wer die wahl hat...</p> </blockquote> <p>Genau, und wer die Wahl hat sollte wohl auf Javascript soweit wie möglich verzichten :)</p> <div class="signature">-- <br> << Life is just a moment in eternity,<br> yet every life echoes there >> </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986123?srt=yes#m986123 Gunnar Bittersmann self2006@gunnarbittersmann.de http://gunnarbittersmann.de/ 2006-06-21T16:51:44Z 2006-06-21T16:51:44Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hello out there!</p> <blockquote> <p>Weise jedem TR und jedem TD eine Klasse zu.</p> </blockquote> <p>Nein, du möchtest die Tabellenzeilen nicht klassifizieren, sondern identifizieren:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>col</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>colgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>col</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>col</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col2<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>colgroup</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>00<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>01<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>02<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>10<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>11<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>12<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>20<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>21<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>22<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> </code></pre> <p>Der IE versteht es, Tabellenspalten über das col-Element auszublenden:<br> <code class="language-css"><span class="token selector">#col1</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">}</span></code></p> <p>Firefox lässt sich davon nicht beeindrucken, kennt aber den Nachbarschaftsselektor und Pseudoklassen:<br> <code class="language-css"><span class="token selector">th:first-child+th, th:first-child+td</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">}</span></code></p> <p>Mit der Kombination<br> <code class="language-css"><span class="token selector">#col1, th:first-child+th, th:first-child+td</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">}</span></code><br> sollten wohl alle CSS-interpretierenden UAs die Spalte ausblenden.</p> <p>Bei Zeilen gibt es keine Probleme:<br> <code class="language-css"><span class="token selector">#row1</span> <span class="token punctuation">{</span><span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">}</span></code></p> <p>See ya up the road,<br> Gunnar</p> <div class="signature">-- <br> “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen) </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986118?srt=yes#m986118 berdn web@strich-komma.de 2006-06-21T17:09:28Z 2006-06-21T17:09:28Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hallo Gunnar, hallo DeWitt,</p> <p>man lernt immer noch dazu ;-)</p> <p>Aber Gunnar, was ist denn:</p> <p><col id="col0" /></p> <p>Habe ich so noch nic benutzt, zwar arbeite ich auch mit colgroups, das ist mir aber neu.</p> <p>Liebe Grüße aus dem F'hain,</p> <p>Bernd</p> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986119?srt=yes#m986119 Gunnar Bittersmann self2006@gunnarbittersmann.de http://gunnarbittersmann.de/ 2006-06-21T18:09:05Z 2006-06-21T18:09:05Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hello out there!</p> <blockquote> <p>Aber Gunnar, was ist denn:<br> <col id="col0" /></p> </blockquote> <p>Eine Spalte?</p> <blockquote> <p>Habe ich so noch nic benutzt, zwar arbeite ich auch mit colgroups, das ist mir aber neu.</p> </blockquote> <p>Was ist dir neu? Dass colgroups cols beinhalten oder dass col auch ohne colgroup stehen kann?</p> <p><a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow noopener noreferrer">DTD XHTML 1.0 Strict</a>:</p> <pre><code class="block language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>!ELEMENT</span> <span class="token attr-name">table</span> <span class="token attr-name">(caption?,</span> <span class="token attr-name">(col*|colgroup*),</span> <span class="token attr-name">thead?,</span> <span class="token attr-name">tfoot?,</span> <span class="token attr-name">(tbody+|tr+))</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>Liebe Grüße aus dem F'hain,</p> </blockquote> <p>Äh, dito. (Nähe Samariterkirche)</p> <p>See ya up the road,<br> Gunnar</p> <div class="signature">-- <br> “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen) </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986120?srt=yes#m986120 berdn web@strich-komma.de 2006-06-21T18:27:37Z 2006-06-21T18:27:37Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hallo Gunnar,</p> <p>eine colgroup dient also dazu, mehrere Spalten inhaltlich zu zuordnen.</p> <p>Na, dann kann natürlich eine Spalte (col) auch alleine stehen.</p> <p>D.h. ich kann auch mehrere colgroups in einer Tabelle haben?</p> <p>Liebe Grüße,</p> <p>Bernd</p> <p>PS: Ich wohne am Boxhagener Platz<br> <a href="http://www.strich-komma.de/kontakt/kontakt.html" rel="nofollow noopener noreferrer">http://www.strich-komma.de/kontakt/kontakt.html</a></p> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986121?srt=yes#m986121 Gunnar Bittersmann self2006@gunnarbittersmann.de http://gunnarbittersmann.de/ 2006-06-21T18:51:26Z 2006-06-21T18:51:26Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hello out there!</p> <blockquote> <p>D.h. ich kann auch mehrere colgroups in einer Tabelle haben?</p> </blockquote> <p>Ja, das sagt der Stern:</p> <pre><code class="block language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>!ELEMENT</span> <span class="token attr-name">table</span> <span class="token attr-name">(caption?,</span> <span class="token attr-name">(col*|colgroup*),</span> <span class="token attr-name">thead?,</span> <span class="token attr-name">tfoot?,</span> <span class="token attr-name">(tbody+|tr+))</span><span class="token punctuation">></span></span> </code></pre> <p>^<br> ? – nicht oder einmal<br> * – nicht oder beliebig oft</p> <ul> <li>– beliebig oft (mindestens einmal)</li> </ul> <blockquote> <p>PS: Ich wohne am Boxhagener Platz</p> </blockquote> <p>Na, vielleicht läuft man sich mal übern Weg.</p> <p>See ya up the road,<br> Gunnar</p> <div class="signature">-- <br> “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen) </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986122?srt=yes#m986122 berdn web@strich-komma.de 2006-06-21T19:38:16Z 2006-06-21T19:38:16Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Danke Gunnar,</p> <p>... Du bleibst bei Deinem Wahlspruch ;-)<br> Gesehen habe wir uns bestimmt schon öfters ;-)</p> <p>Liebe Grüße,</p> <p>Berdn</p> <p>PS: Dir auch mal meinen Dank für die gute Arbeit die Du hier leistest.</p> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986130?srt=yes#m986130 Roger rehnelt@gmx.net 2006-06-21T17:46:55Z 2006-06-21T17:46:55Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>moin!</p> <p>wow, super erklärt. so hab ich es auch geschnallt. ich fummel mal. danke!</p> <p>gruß.<br> roger.</p> <div class="signature">-- <br> meine freundin sagt, ich wäre neugierig.<br> so steht's zumindest in ihrem tagebuch. </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986124?srt=yes#m986124 Roger rehnelt@gmx.net 2006-06-22T08:45:30Z 2006-06-22T08:45:30Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>moin!</p> <p>ich hab mich grad nochmal etwas genauer mit der sache beschäftigt. und habe da noch ein paar fragen:</p> <p>wie kann ich das ein-/ausblenden per klick erreichen? (mit document.getElementsById[...].style? ich bin wohl zu blöd dafür...)<br> genügt ein display: block um die spalte/zeile wieder anzuzeigen?</p> <p>gruß.<br> roger.</p> <div class="signature">-- <br> meine freundin sagt, ich wäre neugierig.<br> so steht's zumindest in ihrem tagebuch. </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986127?srt=yes#m986127 Cybaer cybaer@binon.net http://Coding.binon.net 2006-06-22T09:01:10Z 2006-06-22T09:01:10Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hi,</p> <blockquote> <p>wie kann ich das ein-/ausblenden per klick erreichen?</p> </blockquote> <p>Mit CSS? Gar nicht.</p> <p>Dafür braucht's ...</p> <blockquote> <p>(mit document.getElementsById[...].style?</p> </blockquote> <p>... JavaScript.</p> <p>Und es gibt mehrere Möglichkeiten ...</p> <p>... aber ich warte lieber erstmal Gunnars Antwort ab - er hat damit angefangen. ;-)</p> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986125?srt=yes#m986125 Cybaer cybaer@binon.net http://Coding.binon.net 2006-06-22T11:39:39Z 2006-06-22T11:39:39Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hi,</p> <blockquote> <p>wie kann ich das ein-/ausblenden per klick erreichen? (mit document.getElementsById[...].style? ich bin wohl zu blöd dafür...)</p> </blockquote> <p>Du kannst den CSS-Code selbst ändern (s. <a href="http://Coding.binon.net/CSS-Rules" rel="nofollow noopener noreferrer">Coding: CSS-Regeln auslesen & ändern</a>).</p> <p>Direkt: Wenn z.B.</p> <p>#col1, th:first-child+th, th:first-child+td {display: none}</p> <p>die 1. Regel des 1. Stylesheets ist, dann kann man mit document.styleSheets[0].rules[0].style.cssText im IE bzw. mit document.styleSheets[0].cssRules[0].style.cssText im Rest der dies unterstützenden Browserwelt den CSS-Text auswechseln.</p> <p>Eine von mehreren Lösungsmöglichkeiten.</p> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986126?srt=yes#m986126 Cybaer cybaer@binon.net http://Coding.binon.net 2006-06-22T11:42:45Z 2006-06-22T11:42:45Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Ähm,</p> <blockquote> <p>#col1, th:first-child+th, th:first-child+td {display: none}</p> </blockquote> <p>da das ein Gruppen-Selektor ist, sind allerdings noch ein paar Unterschiede zw. den Browsern zu beachten. =;-)</p> <p>Also sinnvollerweise sollte man das auf 2 Regeln aufteilen:<br> 1. #col1 {display: none}<br> 2. th:first-child+th, th:first-child+td {display: none}</p> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986128?srt=yes#m986128 Roger rehnelt@gmx.net 2006-06-22T09:06:23Z 2006-06-22T09:06:23Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>moin!</p> <blockquote> <p>... aber ich warte lieber erstmal Gunnars Antwort ab - er hat damit angefangen. ;-)</p> </blockquote> <p>selber schuld, wenn ich ihn jetzt nerve? :)</p> <p>gruß.<br> roger.</p> <div class="signature">-- <br> meine freundin sagt, ich wäre neugierig.<br> so steht's zumindest in ihrem tagebuch. </div> https://forum.selfhtml.org/self/2006/jun/21/zeilen-und-spalten-einer-tabelle-ein-und-ausblenden-lassen/986129?srt=yes#m986129 Cybaer cybaer@binon.net http://Coding.binon.net 2006-06-22T10:19:50Z 2006-06-22T10:19:50Z zeilen und spalten einer tabelle ein- und ausblenden lassen <p>Hi,</p> <blockquote> <blockquote> <p>... aber ich warte lieber erstmal Gunnars Antwort ab - er hat damit angefangen. ;-)<br> selber schuld, wenn ich ihn jetzt nerve? :)</p> </blockquote> </blockquote> <p>So sehe ich das! >;-)</p> <p>Aber dir wird auf jeden Fall geholfen - muscht vielleicht nur a bissel warten ... 8-)</p> <p>Gruß, Cybaer</p> <div class="signature">-- <br> Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! </div>