Tabellenzellen verrutschen

[Pit]

Hallo,

wenn ich (auch in meinem stark vereinfachten Beispiel) einen Eintrag dynamisch hinzufügen möchte, wird dieser zwar eingetragen, aber die Tabellenzellen verrutschen innerhalb der Tabelle.

Kann mir mal jemand auf die sprünge helfen, warum das so ist? Ich dachte, ich hätte den Eintrag korrekt hinzugefügt. Kann aber nicht so sein, nur finde ich den Fehler nicht.

Pit

[Matthias Apsel]

Hallo Pit,

Es fehlt die Tabellenzelle "Eintragx".

Bis demnächst
Matthias

[Pit]

Hallo Matthias,

Es fehlt die Tabellenzelle "Eintragx".

Bist Du sicher? Ist es nicht so, dass im html-Teil der Aufbau:

<tbody>
<tr>
<td>Eintrag</td>
<td>Buttons</td>
</tr>
</tbody>

ist und der javascript-Teil sich genau desselben Aufbaus bedient?

Pit

[Matthias Apsel]

Hallo Pit,

Es fehlt die Tabellenzelle "Eintragx".

Bist Du sicher?

Ja.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Pit

wenn ich (auch in meinem stark vereinfachten Beispiel) einen Eintrag dynamisch hinzufügen möchte, wird dieser zwar eingetragen, aber die Tabellenzellen verrutschen innerhalb der Tabelle.

Kann mir mal jemand auf die sprünge helfen, warum das so ist?

Ich sehe was, was du nicht siehst – und das ist blau:

Die Verschachtelung stimmt wohl nicht.

Überhaupt: tbody dient zum Gruppieren zusammengehöriger Tabellenzeilen. Mehrere tbodys mit jeweils einem tr-Kind machen keinen Sinn.

LLAP 🖖

[Pit]

Hallo Gunnar,

Ich sehe was, was du nicht siehst – und das ist blau:

Die Verschachtelung stimmt wohl nicht.

Das ist sicher richtig, aber auch in Deinem markierten Teil sehe ichs noch nicht. 😟 Kannst Du mir den Fehler mal genau zeigen? Ich sehe den nicht, weil Deine tags teilweise zugeklappt sind.

Überhaupt: tbody dient zum Gruppieren zusammengehöriger Tabellenzeilen. Mehrere tbodys mit jeweils einem tr-Kind machen keinen Sinn.

Soll auch gar nicht so sein. Jeder tbody soll 2 tr beinhalten, einmal die Normalline und einmal die entsprechende Editline_. In einem tbody stecken beide nur deshalb, weil ich sie als Gesammtes verschieben können möchte, um die Sortierung der Tabelle hierrüber zu realisieren.

[Matthias Apsel]

Hallo Pit,

Die Verschachtelung stimmt wohl nicht.

Das ist sicher richtig, aber auch in Deinem markierten Teil sehe ichs noch nicht. 😟 Kannst Du mir den Fehler mal genau zeigen? Ich sehe den nicht, weil Deine tags teilweise zugeklappt sind.

Es sind keine Tags zugeklappt. Der Fehler ist die blaue Zeile. tbody als kind von tbody ist nicht erlaubt.

Bis demnächst
Matthias

[Pit]

Hallo,

Die Verschachtelung stimmt wohl nicht.

Es sind keine Tags zugeklappt. Der Fehler ist die blaue Zeile. tbody als kind von tbody ist nicht erlaubt.

Irgendwie habe ich $('#sort > tbody:last-child').append() missverstanden. Das fügt wohl ins tbody hinein. Mit $('#sort').append() gehts.

Danke für die Hilfe. Aber die fehlende Tabellenzelle ist wohl eher Wirkung als Ursache.

Pit

[Pit]

Hallo,

aber warum kann ich denn nun einen neu generierten Eintrag nicht editieren? Der Button erhält die ID und sollte im Sinne der Event delegation doch einen Eventhandler erhalten. 😟

Pit

[Gunnar Bittersmann]

@@Pit

aber warum kann ich denn nun einen neu generierten Eintrag nicht editieren? Der Button erhält die ID und sollte im Sinne der Event delegation doch einen Eventhandler erhalten. 😟

Nein, du hast Eventhandler für alle Elemente der Klasse katzeile registriert – wie gesagt: für alle zum Zeitpunkt der Registrierung der Eventhandler vorhandenen Elemente. Für neu hinzukommende Elemente aber nicht.

Du möchtest einen Eventhandler weiter oben im DOM registrieren‽

Und ja, jQuery ist wenig geeignet zu erkennen, was man da eigentlich tut. (In dem Fall: mehrere Eventhandler statt nur einem zu registrieren). Zum Lernen ist jQuery eher schädlich als nützlich.

(Und wenn man dann JavaScript gelernt hat, ist jQuery auch kaum noch nützlich.)

LLAP 🖖

[MudGuard]

Hi,

Nein, du hast Eventhandler für alle Elemente der Klasse katzeile registriert – wie gesagt: für alle zum Zeitpunkt der Registrierung der Eventhandler vorhandenen Elemente. Für neu hinzukommende Elemente aber nicht.

Du möchtest einen Eventhandler weiter oben im DOM registrieren‽

Das wurde doch auch schon mindestens einmal in einem Pit-Thread geschrieben …

cu,
Andreas a/k/a MudGuard

[Gunnar Bittersmann]

@@MudGuard

Nein, du hast Eventhandler für alle Elemente der Klasse katzeile registriert – wie gesagt: für alle zum Zeitpunkt der Registrierung der Eventhandler vorhandenen Elemente. Für neu hinzukommende Elemente aber nicht.

Du möchtest einen Eventhandler weiter oben im DOM registrieren‽

Das wurde doch auch schon mindestens einmal in einem Pit-Thread geschrieben …

Deshalb ja wie gesagt „wie gesagt“. 😉

LLAP 🖖

[Pit]

Hi,

Du möchtest einen Eventhandler weiter oben im DOM registrieren‽

Das wurde doch auch schon mindestens einmal in einem Pit-Thread geschrieben …

...woraufhin er (Pit) ihn auch schon weiter nach oben verschoben hat. Wie weit hoch soll er denn? Zudem, in einem anderen Beispiel funktioniert es ja...

Pit

[Gunnar Bittersmann]

@@Pit

Du möchtest einen Eventhandler weiter oben im DOM registrieren‽

Das wurde doch auch schon mindestens einmal in einem Pit-Thread geschrieben …

...woraufhin er (Pit) ihn auch schon weiter nach oben verschoben hat. Wie weit hoch soll er denn?

Zumindest so hoch, dass du bei einem Element ankommst, dass zum Zeitpunkt der Registrierung der Eventhandler – nein, es sollte heißen: des Eventhandlers; sonst macht event delegation ja wenig Sinn – schon im DOM ist. Die Tabelle wäre geeignet.

Oder noch höher: an document.body oder document.documentElement.

LLAP 🖖

[Pit]

Hi Gunnar,

...woraufhin er (Pit) ihn auch schon weiter nach oben verschoben hat. Wie weit hoch soll er denn?

Zumindest so hoch, dass du bei einem Element ankommst, dass zum Zeitpunkt der Registrierung der Eventhandler – nein, es sollte heißen: des Eventhandlers; sonst macht event delegation ja wenig Sinn – schon im DOM ist. Die Tabelle wäre geeignet.

Oder noch höher: an document.body oder document.documentElement.

Ich habe mir das Event delegation nochmal komplett durchgelesen. Was ich nicht wußte, ist, dass ich das nicht über eine ID, sondern nur über einen container oder

<a>
<li>
<ul #list>
<div #container>
<body>
<html> 

machen kann. Ich habe nun die Tabelle genommen und alles klappt. Nun kämpfe ich damit, die lezte Tabellenzeile (das wäre die, in dem ich den neuen Eintrag vornehmen kann), von außerhalb der Tabelle in die Tabelle zu nehmen. Zugleich soll diese Zeile aber immer sichtbar bleiben, soll also fixiert werden…

Pit

[Pit]

Hi Gunnar,

Du möchtest einen Eventhandler weiter oben im DOM registrieren‽

Ich dachte, katzeile ist weit genug oben?

Kannst Du mir denn bitte noch erklären, warum es in diesem Beispiel funktioniert und in diesem hier nicht? Bis auf die verrutschte Tabellenzelle ist der Rest doch identisch?

(Und wenn man dann JavaScript gelernt hat, ist jQuery auch kaum noch nützlich.)

Ist ja gut, ich habe mir gerade gestern erst das Buch "JavaScript, Die universelle Sprache zur Web-Programmierung" geholt, aber noch nicht hineingesehen... 😉

Pit

[Gunnar Bittersmann]

@@Pit

Ich dachte, katzeile ist weit genug oben?

Kannst Du mir denn bitte noch erklären, warum es in diesem Beispiel funktioniert

Weil du dort (ich sehe was, was du nicht siehst), ein neues Element der Klasse katzeile in ein bestehendes Element der Klasse katzeile, für welches ja bereits ein Eventhandler registriert ist, eingehängt hast. (Nur dass die Verschachtelung aufgrund der Elementtypen falsch ist.)

und in diesem hier nicht?

Weil du hier ein neues Element der Klasse katzeile neben bestehende Elemente der Klasse katzeile. Deren registrierte Eventhandler interessieren das neue Element herzlich wenig.

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Und ja, jQuery ist wenig geeignet zu erkennen, was man da eigentlich tut. (In dem Fall: mehrere Eventhandler statt nur einem zu registrieren).

In jQuery

$('.katzeile').on('click', 'button', function(event) { … });

sieht man eben nicht, dass man viele Eventhandler für viele Elemente registriert.

In Vanille-JS

document.querySelectorAll('.katzeile').forEach(element => {
	element.addEventListener('click', event => {
		if (event.target.tagName === 'BUTTON') { … }
	)};
});

sticht einem das forEach ins Auge.

Und man kommt leicht drauf, dass das so nicht ganz richtig sein kann, was man da tut.

Zum Lernen ist jQuery eher schädlich als nützlich.

jQuery verschleiert die Zusammenhänge und verleitet dazu, Dummes zu tun.

LLAP 🖖