selfhtml.de - Alles für den Webmaster!

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Ganze Spalten einer Tabelle ausblenden

Autor: sebb86
Datum: 01.03.2010 07:50:34

Hallo,
gibt es eine einfache Möglichkeit Spalten einer Tabelle dynamisch aus- und einzublenden?

Viele Grüße.

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Ganze Spalten einer Tabelle ausblenden

Autor: T.Jung
Datum: 01.03.2010 08:11:19

> gibt es eine einfache Möglichkeit Spalten einer
> Tabelle dynamisch aus- und einzublenden?

Ich hab's noch nie probiert, aber mein erster Ansatz wäre, mit <colgroup> zu arbeiten:
http://de.selfhtml.org/html/tabellen/aufbau.htm#vordefinieren
... und der entsprechenden Spalte eine id zuzuweisen. Auf diese id kannst Du dann per JavaScript zugreifen, um sie auszublenden.

HTH,
Tobias Jung

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Ganze Spalten einer Tabelle ausblenden

Autor: T.Jung
Datum: 01.03.2010 09:30:47

> Ich hab's noch nie probiert, aber mein erster
> Ansatz wäre, mit <colgroup> zu arbeiten:
>
> http://de.selfhtml.org/html/tabellen/aufbau.htm#vordefinieren
> ... und der entsprechenden Spalte eine id
> zuzuweisen. Auf diese id kannst Du dann per
> JavaScript zugreifen, um sie auszublenden.

... so, jetzt hab ich's mal probiert, und es scheint _nicht_ zu funktionieren.
Eine _Zeile_ auszublenden, ist kein Problem -- aber bei eine _Spalte_ geht es entweder nicht, oder ich hab halt was falsch gemacht...

Unten der Link zur Testdatei, falls es jemanden interessiert.

Gruß,
Tobias Jung

• Test: Spalte ein-/ausblenden
  
  

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Ganze Spalten einer Tabelle ausblenden

Autor: Freddy
Datum: 01.03.2010 11:58:53

Hallo,

> > Ich hab's noch nie probiert, aber mein erster
> > Ansatz wäre, mit <colgroup> zu arbeiten:

> ... so, jetzt hab ich's mal probiert, und es
> scheint _nicht_ zu funktionieren.
> Eine _Zeile_ auszublenden, ist kein Problem --
> aber bei eine _Spalte_ geht es entweder nicht,
> oder ich hab halt was falsch gemacht...

Mir fiele vielleicht noch eine »Mark Up-aufblähende« Variante ein: alle auszublendenen Zellen werden mit einer Klasse versehen. In einem kleinen Rahmen bestimmt durchsatzbar, würde ich bei einer großen Tabelle eher darauf verzichten...


Gruß,
Freddy

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Ganze Spalten einer Tabelle ausblenden

Autor: reporter
Datum: 02.03.2010 02:56:40

Hallo,

in moment fällt mir auch keine bessere Lösung ein. Allerdings, mit dem "aufblähen" nicht so schlimm sehen. Wenn die Namen der Dummy-Klassen kurz gehalten werden, hält es sich auch bei großen Tabellen in Grenzen.

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Ganze Spalten einer Tabelle ausblenden

Autor: sebb86
Datum: 18.03.2010 08:47:25

Hallo,
ist zwar schon etwas her aber trotzdem vielen Dank!
Könntest du mir die Datei: "<script src="jquerystuff/jquery.js" ..." noch zur Verfügung stellen? Die wird doch benötigt oder?
Ich kenne mich leider so gut wie gar nicht mit JavaScript aus, daher ist das ganze auch ziemlich schwer zu verstehen für mich.

Danke

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Ganze Spalten einer Tabelle ausblenden

Autor: sebb86
Datum: 18.03.2010 08:48:41

Hallo,

ich kenne mich leider so gut wie gar nicht mit JavaScript aus. Was ist denn eine "Mark-Up" Variante? Gibts dafür irgendwo ein Beispiel?

Vielen Dank!

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Ganze Spalten einer Tabelle ausblenden

Autor: T.Jung
Datum: 18.03.2010 08:57:29

> Könntest du mir die Datei: "<script
> src="jquerystuff/jquery.js" ..." noch zur
> Verfügung stellen? Die wird doch benötigt oder?

Ja, die wird benötigt und die gibt's auf
http://jquery.com/

Gruß,
Tobias Jung

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Ganze Spalten einer Tabelle ausblenden

Autor: sebb86
Datum: 18.03.2010 16:18:29

Hallo Tobias,

vielen Dank. Ich habe das ganze dann auch bei mir zum Laufen gebracht. :-) Also kann ich jetzt immerhin Zeilen ausblenden.
Hast du vielleicht noch eine Idee, woran es liegen könnte, dass keine Spalten ausgeblendet werden können?

Und bezüglich der Realisierung... Nehmen wir an ich habe 100 Zeilen. Wie realisiere ich es denn am besten, dass ich die Zeilen später auch wieder einblenden kann? Also ich kann ja nicht am Anfang "zeile 1 ausblenden", "zeile 2 ausblenden", ..., "zeile 100 ausblenden" so alle auflisten. Und wenn ich das ganze in die Tabelle, quasi in die entsprechende Zeile verlagere, dann ist die ja weg, wenn ich sie ausgeblendet habe ;)

Vielen Dank im Voraus und 'ne schöne restliche Woche :)

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Ganze Spalten einer Tabelle ausblenden

Autor: sebb86
Datum: 18.03.2010 17:53:26

Ich denke auch, dass das ausblenden mit colgroup nicht funktioniert. Gibt man einer einzelnen Zelle die id="spalte_3", dann wird diese ja auch ausgeblendet, dummerweise aber eben nur diese eine. <th> lassen sich auch einfach ausblenden, aber halt auch nur so wie Zellen, also nie die ganzen Spalten :(

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Tabellenspalten ausblenden

Autor: gaby
Datum: 19.03.2010 16:01:40

> > Ich hab's noch nie probiert, aber mein erster
> > Ansatz wäre, mit <colgroup> zu arbeiten:


Meiner auch.
Nur leider funktioniert das nicht in den meisten Browsern.
Im IE-6 jedoch kein Problem.

Vor Jahren gabs hierzu einen Thread im CSS-Forum.
Google mal hier nach "Hupen". ;-))


.... ersatzweise
"Tabellenspalten formatieren"

http://www.selfhtml.de/forum/zeigebeitrag_1_104772_104637_0.php

Mit dem Nachfolge-Selektor in Kombination mit dem Kind-Selektor kann man in standardkonformen Browsern die Tabellenspalten ansprechen.

zb für die dritte Spalte:

tr > td:first-child + td + td {
      color: red; }

Jetzt müßte man Dein Script noch darum ergänzen, daß es zwischen 'display: none' und 'display: table-cell' für diesen Selektor hin und her schaltet.


Warum das W3C aber vorschreibt, daß für COL nur die Eigenschaften 'border', 'background' und 'width' angewendet werden dürfen, ist für mich nicht nachvollziehbar.

http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap17.html
(Kapitel 17.3)


Grüße
gaby

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Tabellenspalten ausblenden

Autor: sebb86
Datum: 22.03.2010 04:56:22

> Mit dem Nachfolge-Selektor in Kombination mit dem
> Kind-Selektor kann man in standardkonformen
> Browsern die Tabellenspalten ansprechen.
>
> für die dritte Spalte:
>
> tr > td:first-child  + td +
> td  {
>
>             color:
> red;  }

Also in meinem Fall ist es so, dass alle Spalten gleich aussehen, also kein Ändern der Farbe oder sowas. Muss ich das obige trotzdem in meine CSS-Datei schreiben?



> Jetzt müßte man Dein Script noch darum ergänzen,
> daß es zwischen 'display: none' und 'display:
> table-cell' für diesen Selektor  hin und
> her schaltet.

Wie realisiert man sowas denn?

Vielen Dank im Voraus!

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Tabellenspalten ausblenden

Autor: sebb86
Datum: 28.03.2010 09:37:30

Ein paar Zeilen Quellcode würden mir schon sehr helfen ;)

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Ganze Spalten einer Tabelle ausblenden

Autor: sebb86
Datum: 28.03.2010 15:17:56

Hallo,
anbei mal eine lauffähige Datei. Das Ziel ist es immer eine Tabellenspalte auszublenden, nur leider finde ich den Fehler nicht. :/
Er blendet irgendwie den "th" der nächsten Spalte mit aus... hmmm...

Wäre super, wenn jemand helfen könnte.

Danke im Voraus!

• http://nopaste.info/0271b9b231.html
  
  

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Tabellenspalten ausblenden

Autor: gaby
Datum: 29.03.2010 04:30:26

> Ein paar Zeilen Quellcode würden mir schon sehr
> helfen ;)


Hallo,

Ich hätte auch noch eine »MarkUp-aufblähende« Idee zu bieten.

Damit man für JS eine Tabellenspalte mit 'getElementbyId' ansprechen kann, könnte man eine Tabelle mit nur *einer* Reihe erstellen.
In jede Zelle dieser einen Reihe kommt nun nochmal eine sub-Tabelle mit *einer* Spalte und mehreren Reihen.

Diesen sub-Tabellen (rot gepunktet) kann unterschiedliche IDs zuweisen, die man im Script ansprechen kann.
Das markup(=der HTML-Quellcode) sähe so aus:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

td { border: 1px solid silver;  }

</style>

</head>

<body>

<table style="width: 44em; border: 5px double blue" cellspacing="5" cellpadding="10">
  <tr>
    <td>
      <table id="spalte1" style="border: 3px dotted red" cellspacing="5" cellpadding="10">
        <tr>
          <td>a - spalte_1</td>
        </tr>
        <tr>
          <td>b - spalte_1</td>
        </tr>
        <tr>
          <td>c - spalte_1</td>
        </tr>
        <tr>
          <td>d - spalte_1</td>
        </tr>
      </table>
    </td>
    <td>
      <table id="spalte2" style="border: 3px dotted red" cellspacing="5" cellpadding="10">
        <tr>
          <td>a - spalte_2</td>
        </tr>
        <tr>
          <td>b - spalte_2</td>
        </tr>
        <tr>
          <td>c - spalte_2</td>
        </tr>
        <tr>
          <td>d - spalte_2</td>
        </tr>
      </table>
    </td>
    <td>
      <table id="spalte3" style="border: 3px dotted red" cellspacing="5" cellpadding="10">
        <tr>
          <td>a - spalte_3</td>
        </tr>
        <tr>
          <td>b - spalte_3</td>
        </tr>
        <tr>
          <td>c - spalte_3</td>
        </tr>
        <tr>
          <td>d - spalte_3</td>
        </tr>
      </table>
    </td>
    <td>
      <table id="spalte4" style="border: 3px dotted red" cellspacing="5" cellpadding="10">
        <tr>
          <td>a - spalte_4</td>
        </tr>
        <tr>
          <td>b - spalte_4</td>
        </tr>
        <tr>
          <td>c - spalte_4</td>
        </tr>
        <tr>
          <td>d - spalte_4</td>
        </tr>
      </table>
    </td>
  </tr>
</table>


</body>
</html>
===========================================================


Ob das allerdings in dieser Form realisierbar ist, habe ich im Moment nicht die Zeit, auszuprobieren.

Aber ich bin ja auch nicht die Einzige im Forum. ;-)


Grüße
gaby



(Deinen neu eröffneten Thread zum gleichen Thema hänge hier unten dran)

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Tabellenspalten ausblenden

Autor: Freddy
Datum: 29.03.2010 09:56:56

Hallo,

> > Ein paar Zeilen Quellcode würden mir schon sehr
> > helfen ;)

> Ich hätte auch noch eine »MarkUp-aufblähende«
> Idee zu bieten.

... und die habe ich leicht verändert und um den JS-Teil (jQuery-basierend) ergänzt, getestet FF 3.62 / Ubuntu / FireBug.

http://home.arcor.de/sve-fre/selfhtml/sebb86/


HTH + Gruß,
Freddy

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Tabellenspalten ausblenden

Autor: sebb86
Datum: 31.03.2010 10:18:03

Vielen Dank!
Das sieht top aus und hat mir geholfen. :-)

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Ganze Spalten einer Tabelle ausblenden

Autor: sebb86
Datum: 31.03.2010 10:18:48

Anbei noch eine andere Lösung:

[CODE]
<script type="text/javascript">
function toggleColumn(table, column) {
for (var i = 0; i < table.rows.length; i++){
if (table.rows[i].cells.length > column){
var cell = table.rows[i].cells[column];
cell.style.display = (cell.style.display == "none")? "": "none";
}
}
}
</script>
[/CODE]


[CODE]
    <table>
          <tr>
              <td><a onclick="toggleColumn(document.getElementById('tab1'), 1);">1</a></td>
              <td><a onclick="toggleColumn(document.getElementById('tab1'), 2);">2</a></td>
              <td><a onclick="toggleColumn(document.getElementById('tab1'), 3);">3</a></td>
              <td><a onclick="toggleColumn(document.getElementById('tab1'), 4);">4</a></td>
              <td><a onclick="toggleColumn(document.getElementById('tab1'), 5);">5</a></td>
              <td><a onclick="toggleColumn(document.getElementById('tab1'), 6);">6</a></td>
          </tr>
    </table>
  
      <br><p>    
            
      <table id="tab1">
       <tr>
          <th>[Optionen]</th>
          <th>...</th>
       ...
[/CODE]

Anzeige: Goneo - Du machst das Web!

Anzeige: united-domains - Die ganze Welt der Domains

Re: Tabellenspalten ausblenden

Autor: netinja
Datum: 01.04.2010 06:54:03

Hallo,

Ich habe auch noch einige Beispiele im Netz gefunden. Da ist bestimmt für jeden etwas dabei.

Ich sammel die Links mal hier an zentraler Stelle. :-D
zunächst einige Tutorials:

http://coding.binon.net/dhtml/toggle.htm

http://www.webwork-blog.net/javascript/html-tabellenspalten-per-javascript-ausblenden/

http://javascript.jstruebig.de/javascript/73/


Beispiele:

http://www.sprachlernspiele.de/selftests/klapptabelle/version7_1.html

http://www.sprachlernspiele.de/selftests/klapptabelle/spaltenfilter.html


Und hier noch einen über
"Elemente bei Klick ein- und ausblenden"

http://www.supportnet.de/t/2279687


LG
netinja