This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Javascript zerschießt Tabelle
#1
Hallo zusammen,

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

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
<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.
<tr id="genre" style="display:none;">
was kann mann tun?

Gruß Jörg
Zitieren
#2
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
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Als Lösung markieren Zitieren
#3
Das ist der Ausgang

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

[Bild: 20230117081109b41da9b41e5b84c87a7698cac328ac3b.png]




ohne Javascript sieht das dann so ausBig Grina 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.



[Bild: 2023011708111044ad24f06caf6bdb48880f1bbb4cfa7d.png]



und mit javscript



[Bild: 20230117081110f9c8b6db8bc59989ea0eefc20d3fa81d.png]



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



Danke für die Rückmeldung
Als Lösung markieren Zitieren
#4
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
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Als Lösung markieren Zitieren
#5
ich habe bis auf die Bilder den Quelltext in eine Datei geschrieben. ist als Attchment hinterlegt.


Angehängte Dateien
.htm   neue.htm (Größe: 12 KB / Downloads: 2)
Als Lösung markieren Zitieren
#6
Scheinbar ist die Aufgabenstellung nicht zu lösen.
ich bin auf <divs>s umgestiegen.
Als Lösung markieren Zitieren
#7
(19.01.2023, 14:15)joerg.plage@web.de schrieb: 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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Als Lösung markieren Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste