• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Html Spalten eines Tabels ein und ausblenden per Knopfdruck? Brauche Hilfe

H

HtmlAnfänger10

Neues Mitglied
Hallo, wie kann man mit Html Spalten eines Tabels ein und ausblenden per Knopfdruck?

Beispiel: Diese Spalten sind jetzt alle augklappt
1► 2► 3► 4►
Hallo1 Hallo2 Hallo2 Hallo2
Hallo1A Hallo2B Hallo2C Hallo2D
Hallo1XY Hallo24R Hallo2J Hallo2G

Hier ist die Splate 3 nicht ausgeklappt, nimmt da durch auch keinen Platz der Seite ein und die Spalten adjustieren sich automatisch.
Sie kann allerdings wieder per Knopfdruck ausgeklappt werden.

1► 2► 3⬇ 4►
Hallo1 Hallo2 Hallo2
Hallo1A Hallo2B Hallo2D
Hallo1XY Hallo24R Hallo2G

Wichtig ist auch die Frage, wie man die Zelle(z.B. Hallo1) so "Formatiert" das sie wenn ein längerer Text drin steht, sich nicht in der zugewiesenen Breite ändert, sondern in der Höhe.

Wäre toll wenn man für den Knopf auch ein kleines Bild nehmen könnte.

Habe das dank eines Videos mit dem Details <Details> </Details> Container versucht, aber nicht geschafft, das geht glaube ich nicht.

Danke im Vorraus!
 
Zuletzt bearbeitet:
Werbung:
hatte heute Nacht noch eine Lösung gefunden:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 0px solid black;
}
</style>
</head>
<body>

<details>
<summary>KAPITEL 1</summary>
<p>
<a id="TOP"></a>
<button onclick="$('#b1, #b2').toggle();">1</button>
<button onclick="$('#b3, #b4').toggle();">2</button>
<button onclick="$('#b5, #b6').toggle();">3</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th id="b1">ISBN</th>
<th id="b3">Title</th>
<th id="b5">Price</th>
</tr>
<tr>
<td id="b1">3476896</td>
<td id="b3">My first HTML</td>
<td id="b5">$53</td>
</tr>
<tr>
<td id="b1">5869207</td>
<td id="b3">My first CSS</td>
<td id="b5">$49</td>
</tr>
<tr>
<th id="b1">ISBN</th>
<th id="b3">Title</th>
<th id="b5">Price</th>
</tr>
<tr>
<td id="b1">3476896</td>
<td id="b3">My first HTML</td>
<td id="b5">$53</td>
</tr>
<tr>
<td id="b1">5869207</td>
<td id="b3">My first CSS</td>
<td id="b5">$49</td>
</tr>

</table>

</p>
</details>

<h1>The colgroup element</h1>

<button onclick="$('#b1, #b2').toggle();">1</button>
<button onclick="$('#b3, #b4').toggle();">2</button>
<button onclick="$('#b5, #b6').toggle();">3</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


<table>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th id="b1"><p style="font-size:30px">This is a paragraph.</p></th>
<th id="b3">Title</th>
<th id="b5">Price</th>
</tr>
<tr>
<td id="b1">3476896</td>
<td id="b3">My first HTML</td>
<td id="b5">$53</td>
</tr>
<tr>
<td id="b1">5869207</td>
<td id="b3">My first CSS</td>
<td id="b5">$49</td>
</tr>
<tr>
<th id="b1">ISBN</th>
<th id="b3">Title</th>
<th id="b5">Price</th>
</tr>
<tr>
<td id="b1">3476896</td>
<td id="b3">My first HTML</td>
<td id="b5">$53</td>
</tr>
<tr>
<td id="b1">5869207</td>
<td id="b3">My first CSS</td>
<td id="b5">$49</td>
</tr>

</table>

<a href="#TOP">TO THE TOP</a>

</body>
</html>
 
Werbung:
Das Problem ist das wenn man die Seite aktualisiert, eine Seite nach vorn geht, oder und wieder zurück, sind die Spalteneinstellungen wieder weck.
Kann man die nicht irgendwie abspeichern?

Danke für deine Hilfe msi. Wenn ich Zeit habe teste ich die mal ob die sich abspeichern, weil da muss schon.

Wenn du weißt das sie, oder eine sich abspeichert, gib mir ein kurzes ja oder nein bitte.

Ich brauche da noch bisschen mehr Zeit, zum durch checken, hab gestern erst mit angefangen mit all dem.
 
Werbung:
Auf jeden Fall positiv, dass Du eine Lösung gefunden hast. Hast Du das selbst entwickelt oder im Netz gefunden?
Aber darüber hinaus, dass das HTML wegen der mehrfachen IDs nicht valide ist, sehe ich noch den Nachteil, dass das Ganze nicht sehr änderungsfreundlich ist: Wenn Du Zellen hinzu fügst, musst Du überall eine Klasse hinzu fügen. Das ist gar nicht nötig, weil man die Zellen einer Spalte über ihren Index ansprechen kann.
 
Tatsächlich selbst durch ausprobieren. Das mit dem hinzufügen ist kein Problem, das mach ich in Goolge Sheets. Nicht valide hat welche Nachteile?
 
der überflüssige jQuery ist nicht in meinem Code, das war noch der Code vom rumprobieren, aus einer noch offenen Seite rauskopiert.
 
Werbung:
HtmlAnfänger10 schrieb:
Das Problem ist das wenn man die Seite aktualisiert, eine Seite nach vorn geht, oder und wieder zurück, sind die Spalteneinstellungen wieder weck.
Kann man die nicht irgendwie abspeichern?
Zum Vergrößern anklicken....
Ja. Zustand über Web Storage speichern (Status der einzelnen Spalten als JSON-Objekt) und einen EventHandler auf pageshow setzen der den Zustand der Spalten wieder herstellt.
HtmlAnfänger10 schrieb:
Nicht valide hat welche Nachteile?
Zum Vergrößern anklicken....
Das kann auch alles mit nicht validem Code funktionieren - da ist allerdings die Gefahr größer dass doch mal irgendwo etwas nicht wie erwartet funktioniert. Gewöhne dir einfach an immer validen Code zu schreiben, dann hast du eine Fehlerquelle weniger - und ein wirklicher Aufwand ist es hier ja nicht. Sempervivum hat übrigens recht, es braucht weder eine ID noch eine Klasse, sowas wie :nth-child() als Selektor existiert.
HtmlAnfänger10 schrieb:
der überflüssige jQuery ist nicht in meinem Code, das war noch der Code vom rumprobieren, aus einer noch offenen Seite rauskopiert.
Zum Vergrößern anklicken....
Ich meine nicht das doppelte script-Element sondern das komplette jQuery (also beide script-Elemente sowie auch das $('…').…) - das kann komplett rausfliegen, Vanilla-JS reicht völlig.
 
Gut, danke, ich werde mich bei Zeit da einarbeiten, da sind alles noch Fremdwörter, außer :nth-child().

Danke dir tk1234.

Perfekt✔
 
Ich hatte weniger nth-child gemeint, sondern so etwas:
Code: 
    <table>
        <colgroup>
            <col span="2" style="background-color:red">
            <col style="background-color:yellow">
        </colgroup>
        <tr>
            <th><span>
                    <p style="font-size:30px">This is a paragraph.</p>
                </span>
            </th>
            <th><span>Title</span></th>
            <th><span>Price</span></th>
        </tr>
        <tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr>
        <tr>
            <td>5869207</td>
            <td>My first CSS</td>
            <td>$49</td>
        </tr>
        <!-- usw. -->
Javascript: 
        window.addEventListener('click', event => {
            if (event.target.matches('th')) {
                const
                    cell = event.target.closest('th'),
                    colIdx = cell.cellIndex,
                    table = cell.closest('table');
                // cell.classList.toggle('hidden');
                Array.from(table.rows).forEach(row => {
                    row.cells[colIdx].classList.toggle('hidden');
                });
            }
        });
Und die Symbole mit CSS einfügen:
Code: 
        table,
        th,
        td {
            border: 0px solid black;
        }

        th::after {
            content: '◀';
        }

        th.hidden::after {
            content: '▶';
        }

        th.hidden span {
            display: none;
        }

        td.hidden {
            width: 1rem;
            opacity: 0;
        }
 
Werbung:
Wenn noch jemand andere Möglichkeiten kennt ein und auszublenden, wäre toll, es geht um die die Möglichkeit des wählens.

Nochmal eine Frage zu dem abspeichern von Einstellungen der Webseite.
Ist das von

tk1234​

Vorgeschlagene, auch abgespeichert für Webseiten die ich von meiner Webseite im neuen Tab öffne?

Und...

Wenn ich die Webseite, alle Seiten der Webseite ganz schließe und dann eine erneut öffne, wenn wie lange?

Ich bin in eher bei cookies, das macht mehr Sinn weil die bleiben ja bis zu Ablaufen, wenn nicht gelöscht.

Danke dir erneut

Sempervivum​

 
HtmlAnfänger10 schrieb:
Nochmal eine Frage zu dem abspeichern von Einstellungen der Webseite.
Ist das von tk1234 Vorgeschlagene, auch abgespeichert für Webseiten die ich von meiner Webseite im neuen Tab öffne?

Und...

Wenn ich die Webseite, alle Seiten der Webseite ganz schließe und dann eine erneut öffne, wenn wie lange?
Zum Vergrößern anklicken....
Das hängt davon ab ob du welche Web Storage-Variante (siehe gleichnamiger Link in #10) du verwendest:
mit localStorage überleben die Daten auch ein Schließen des Browsers (einen entsprechenden Lösch-Mechanismus der die Daten nach der Zeit x o.ä. löscht lässt sich natürlich dazu basteln), mit sessionStorage dagegen sind sie nach dem Schließen des Tabs weg.
 
"nach einem schließen des Tabs weck", mhhh...

Was ist wenn man mehrere Tabs von dieser Webseite hat, diese haben aber alle unterschiedliche eigene Links, www.<Beilspiel>.de/Teil1 und www.<Beilspiel>.de/Teil2 usw...

Wenn ich in TEIL1 einstelle, dann TEIL2 aktualisiere in dem ich vorher noch nichts eingestellt hatte, übernimmt er dann de Einstellungen, von Teil1?

Nein, oder? Das von dir vorgeschlagene geht nur JEWEILS einen Tab richtig? Dafür das in andere TABs übertragen wird bräuchte ich Cookies.

Also wenn ich vom eingestellten Tab aus einen neuen Tab, z.B. durch einen Link öffne, dann übernimmt der die Einstellungen auch nicht.

Weder aktualisieren, noch beim neuen Tab öffnen wäre das möglich ohne Cookies?
 
Werbung:
HtmlAnfänger10 schrieb:
"nach einem schließen des Tabs weck", mhhh...
Zum Vergrößern anklicken....
Lies doch bitte alles was ich geschrieben habe und v.a. lies die verlinkte Seite. Es geht durchaus dass Einstellungen bei neuen Tabs übernommen werden - es wäre aber sinnvoller wenn du nicht fragen würdest ob das Verhalten X und Y geht, sondern einfach verrätst welches Verhalten gewünscht ist …
 
Habs vorher kurz überschaut, entweder ich muss mich 1-2 Tage, ganze wohlgemerkt, mindestens, in Cookies reinarbeiten oder in sessionStorage, weil localStorage klingt ein bisschen viel, weil noch ein Ablauf Datum mit einbauen, uf..... und ich weiß nicht ob das ohne Ablaufdatum überhaupt erlaubt ist für eine Webseite...

Ansonsten war genau das Beispiel die exakte Frage, ich war aus auf ein kurzes ja geht, oder nein geht nicht .

www.<Beilspiel>.de/Teil1 und www.<Beilspiel>.de/Teil2 haben nur die gleichen Click Buttons, wenn ich also in teil1 bin, da etwas einstelle, von das aus auf teil 2 gehe sagtest du ja geht.
dann fang ich da mal an, das mit dem aktualisieren ist nicht so wichtig. Danke.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben