Javascript zerschießt Tabelle

[joerg.plage@web.de]

Hallo zusammen,

ich bin mir zu 99% sicher das mein Javascript die Tabellen Formatierung zerschießt.

Code:

var text = new Array();
text[0] = 'suchformular';
text[1] = 'genre';
text[2] = 'themen';
text[3] = 'land';
    
function toggle(id) {
    if(document.getElementById(id).style.display=="none") {
        for(i=0;i<text.length;i++) {
            document.getElementById(text[i]).style.display="none";
        }
        document.getElementById(id).style.display="block";
    } else {
        document.getElementById(id).style.display="none";
    }
}

es geht um die folgende Tabelle in Zeile 18

Code:

<table>
    <tr>
        <td class="zeile_v"><b>Genre</b></td>
        <td class="zeile">
            <button type="button" class="button2" onclick="toggle('genre')">Genre</button>&nbsp;
            <span class="btn"><b>Abenteuer</b>
                <a href=""><img class="img" src="images/img/loeschen.png" alt=""></a>&nbsp;
            </span>
            <span class="btn"><b>Animation</b>
                <a href=""><img class="img" src="images/img/loeschen.png" alt=""></a>&nbsp;
            </span>
            <span class="btn"><b>Romantik</b>
                <a href=""><img class="img" src="images/img/loeschen.png" alt=""></a>
            </span>
            
        </td>
    </tr>
    <tr id="genre" style="display:none;">
        <td colspan="2">
            <table style="width: 100%;border: black solid 1px;" >
                <tr>
                    <td class="liste">
                        <input type="checkbox" name="genre" value="1" /><span id="liste">Abenteuer</span>
                    <td>
                    <td class="liste">
                        <input type="checkbox" name="genre" value="1" /><span id="liste">Animation</span>
                    <td>
                    <td class="liste">
                        <input type="checkbox" name="genre" value="1" /><span id="liste">Abenteuer</span>
                    <td>
                    <td class="liste">
                        <input type="checkbox" name="genre" value="1" /><span id="liste">Romantik</span>
                    <td>
                <tr>
            </table>
        </td>
    </tr>
<tabel>

ohne Javascript id="genre" wird der Zellen merge in in Zeile 19 <td colspan="2"> angezeigt.

Code:

<tr id="genre" style="display:none;">

was kann mann tun?

Gruß Jörg

[admin]

Kannst du bitte genauer erklären, wie es aussehen soll?
Ich verstehe das so das du auf gerne klicken willst und dann die ganze Zeile angezeigt werden soll?
Da du im Array noch 3 weitere Namen stehen hast, soll das bestimmt für andere Zeilen sein, oder?

Erstmal solltest du überlegen, ob du eine Tabelle brauchst oder einfach nur ein Container. Dann solltest du mit Klassen arbeiten. Mit addclass und removeclass und auch toggleclass wäre es einfacher.

Bei deinem jetzigen Code könntest du auch das ganze Array weglassen.

https://codepen.io/basti1012/pen/RwBLWQY?editors=1010

Das zerschießt dir aber so das Layout.
Ist aber logisch , du nutzt Spalten Layout mit Tabellen in Tabellen und das nutzt man nicht mehr.
Man könnte aber mit CSS noch viel machen.

Falls du mal erklärst, was du alles brauchst , oder eine Bild machen kannst wie es aussehen soll dann können wir dir dabei besser helfen

[joerg.plage@web.de]

Das ist der Ausgang

Auf den grünen Button  liegen die Funktionen für "toggle".






ohne Javascript sieht das dann so ausa php noch nicht eingebaut ist, werden auch nicht alle Optionen angezeigt, sondern nur diese 4 Genre.

bei den Themen und bei den Produktionsländer habe ich 100 oder über 200 Optionen.Die Borders dienen der Zuordnung.







und mit javscript







die merge-Funktion 'colspan' wird nicht ausgeführt.



Danke für die Rückmeldung

[admin]

Kannst du das mal in codepen reinkopieren , mit CSS und Javascript Dateien?
Oder hast du einen Link, damit man das sehen kann.

Verstehe das jetzt so , wenn man den Grünen Ferne Button klickt, soll das so aussehen, wie im Bild 2 oder?
Was ist mit den Grünen Themen und Land Buttons, haben die dann auch solche Checkboxen?
Und was ist mit den Buttons mit dem roten x, haben die auch irgendwas?

Weil in deinen ersten Code hast du ja ein Array erstellt mit den Namen der grünen Buttons.

Dass jeder grüner Button eine Zeile einblenden würde, sollte kein Problem sein , mein Problem ist gerade, dass ich bei dir Tabellenlayout vermute und nicht, weiß, was die CSS dazu noch macht.

Deswegen wäre ein Link gut , oder du kopierst den angezeigten Code aus der Console in Codepen rein , damit man das besser nachvollziehen kann

[joerg.plage@web.de]

ich habe bis auf die Bilder den Quelltext in eine Datei geschrieben. ist als Attchment hinterlegt.

[joerg.plage@web.de]

Scheinbar ist die Aufgabenstellung nicht zu lösen.
ich bin auf <divs>s umgestiegen.

[rzscout]

Scheinbar ist die Aufgabenstellung nicht zu lösen.
ich bin auf <divs>s umgestiegen.

Hi, es hat sich noch keiner intensiv mit deiner Frage auseinander gesetzt. Vielleicht kannst du uns auch die .js-Datei hier ins Forum schicken. Ich gluabe da finden wir dann schnell eine Lösung.

---

Hi Jörg,
ich habe da eine bessere Lösung für dich. Bevor ich die Lösung gebe, schreibe ich warum Tabellen in diesem Zusammenhang nicht das Richtige sind.

Du verwendest für deine Eingabemaske/Formular zum Layouten eine Tabelle. Das ist semmantisch falsch und schränkt dich bei der Visualisierung ein. HTML5 und CSS3 bieten hier eine bessere Lösung. Seit HTML5 und CSS3 verwendet man kein Tabellenlayout mehr. https://wiki.selfhtml.org/wiki/HTML/Tabe...er_Tabelle

Die Lösung heißt CSS Grid Layout das seit CSS3 die Möglichkeit gibt zweidimenisonal ein Layout aufzubauen. Mit der CSS-Einstellung 'display: grid;' lassen sich sehr gut ein Schönes Raster realisieren. Weitere Informationen über das Grid Layout findest du hier: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Grid

Wenn du weitere Fragen hast kannst du gerne dies ins Forum schreiben.

Viele Grüße

scoutrz