Zeilen mit JS in HTML-Tabelle "brechen"

Webdesign & Technik Javascript
1

Hallo,

ich versuche gerade, mittels JavaScript eine Tabellen-Zeile zu brechen, sprich innerhalb einer Zeile ein

einzufügen.

Optisch:
Row1: Cell1 Cell2 Cell3 Cell4

zu

Row1: Cell1 Cell2
Row2: Cell3 Cell4

Code:

<tr>
    <td>Cell1</td>
    <td>Cell2</td>
    <td>Cell3</td>
    <td>Cell4</td>
</tr>

zu

<tr>
    <td>Cell1</td>
    <td>Cell2</td>
</tr>
<tr>
    <td>Cell3</td>
    <td>Cell4</td>
</tr>

Lt. Dokumentation scheint es eine solche Funktion nicht zu geben, man kann nur eine Zeile löschen oder eine neue einfügen, aber nicht innerhalb einer Zeile.

Vllt. übersehe ich da etwas, ich wäre für Hinweise sehr dankbar.

LG, DMan

2

Welche Dokumentation? Verwendest du ein Framework? Ansonsten musst du dir diese Funktionalität eben selbst ausprogrammieren…

Mfg :wink:

4

Hallo Mgier, danke für deine Antwort.

Die ich unter http://www.w3schools.com/jsref/ gefunden habe, bspw. http://www.w3schools.com/jsref/coll_table_cells.asp.

Wenn es sich vermeiden lässt, dann würde ich darauf verzichten.

Geht mir darum, eine Tabelle für Handys (Window.innerWidth < 600) zu brechen, weil es sonst extrem unübersichtlich wird.

LG, DMan

5

Huch, da ist mein Javascript wohl schon etwas eingerostet. Trotzdem ist es ja nicht so kompliziert, dir eine eigene Funktion zu schreiben die das macht. Die macht folgendes:

  1. Füge neue Zeile ein

  2. Füge Zellen 3 und 4 aus vorhergehender Zeile ein

  3. Lösche Zellen 3 und 4 aus vorhergehender Zeile

In etwa so: https://jsfiddle.net/fw46gvf9/2/
Oder habe ich dich missverstanden?

Mfg :wink:

7

Hey Mgier,

Danke für die Antwort. Für diesen Fall wäre es richtig, sind aber 18 Zeilen mit 12 Spalten, daher ist so etwas generisches nicht gerade das richtige. ^^

Aber Danke für den Ansatz, das ist so ziemlich das, was ich gesucht habe. :'D (kann man diese graphischen Smileys auch deaktivieren?)

LG, DMan