jquery append: Wie definiere ich die Position innerhalb einer Tabelle?

[Jörg]

Hallo,

ich möchte mit Jquery eine Tabellenzeile einfügen.

Wie bringe ich denn Jquery bei, dass die neue Tabellenzeile genau nach der Tabellenzeile mit der ID 'XYZ' eingefügt werden soll?

Jörg

[Jörg]

Habe das jetzt über id der jeweiligen tbody gemacht. Aber das muss doch auch irgendwie anders gehen, oder?

[Rolf B]

Hallo Jörg,

wenn Du hinter einer bestimmten Zeile einfügen willst, hilft Dir die ID des tbody nicht viel.

<table>
<tbody>
<tr id="abc"><td>...</td><td>...</td><td>...</td></tr>
<tr id="xyz"><td>...</td><td>...</td><td>...</td></tr>

<tr id="foo"><td>...</td><td>...</td><td>...</td></tr>
<tbody>
</table>

Wenn Du hinter xyz was einfügen willst, wo die Leerzeile ist, dann geht das z.B. so:

let newRow = document.createElement("tr");
// hier td-Elemente einfügen

document.getElementById("xyz")
        .insertAdjacentElement("afterend", newRow);

⇒ insertAdjacentElement (Vorsicht beim Anfassen, der Artikel ist noch ganz warm)

Look Ma, no jQuery necessary! But if I must...

let newRow = document.createElement("tr");
// hier td-Elemente einfügen

$("#xyz").after(newRow);
// oder alternativ
$(newRow).insertAfter("#xyz");

RTFM: .after() vs .insertAfter()

Die DOM-Methode insertAdjacentElement ist schon so alt, die kann man generell als existierend voraussetzen.

Einfügen der td-Elemente geht

• am sinnvollsten per Erzeugen von td-Elementen mit createElement, in denen den Inhalt mit textContent eintragen und dann newRow.append(newCell)
• scheinbar einfach durch Aufbau eines Strings mit dem Inhalt "<td>...</td><td>...</td>...", den man in newRow.innerHTML speichert. Aber dann muss man aufpassen, was für eine Art Inhalt man einfügt: wenn da spitze Klammern oder ein & drin sind, muss escaped werden.

Aber wenn man die ganze Row schon als String hat, dann geht auch:

$("#xyz").after("<tr><td>...</td><td>...</td><td>...</td></tr>");

Rolf

[Felix Riesterer]

Lieber Rolf,

let newRow = document.createElement("tr");
// hier td-Elemente einfügen

$("#xyz").after(newRow);
// oder alternativ
$(newRow).insertAfter("#xyz");

warum der Stilmix?

$("<tr>").insertAfter("#xyz");

Liebe Grüße

Felix Riesterer

[Jörg]

Hallo Rolf,

wenn Du hinter einer bestimmten Zeile einfügen willst, hilft Dir die ID des tbody nicht viel.

Erst,mal danke für Deine nachfolgenden Erklärungen, denn um diese ging es mir ja und Du hast es sehr sehr schön veranschaulicht.

Nur zu Deinem ersten Satz melde ich leise Zweifel an, denn letztlich hat mir in meinem vorliegenden Fall die ID des tbody sehr viel geholfen.

Man geht fälschlicherweise oft von einem tbody aus, eine Tabelle kann aber auch viele tbodys haben.Insogfern kann man vordefinieren, wo der Bereich der eingefügten Zeile(n) sein soll und genau in den jeweiligen Bereich werden dann die Zusatzzeilen eingefügt, wenn die entsprechenden Klicks erfolgten.

Trotzdem. Darum ging es mir ja nicht, es ging mir tatsächlich um die von dedlfix und Dir beschriebene methode.

Gruß, Rolf

[Der Martin]

Hallo,

Nur zu Deinem ersten Satz melde ich leise Zweifel an, denn letztlich hat mir in meinem vorliegenden Fall die ID des tbody sehr viel geholfen.

das mag in deinem speziellen Fall so sein, aber ...

Man geht fälschlicherweise oft von einem tbody aus, eine Tabelle kann aber auch viele tbodys haben.

Richtig, aber das ist untypisch, nicht der übliche Fall. Und dein Anliegen hörte sich eher so an, als wolltest du Zeilen an einer beliebigen Position einfügen. In deinem Startposting hast du geschrieben:

genau nach der Tabellenzeile mit der ID 'XYZ'

Daraus können wir nicht schließen, dass du gruppierende tbody-Container hast. Und so wie sich die Erklärung jetzt darstellt, ist auch nicht die ID einer Tabellenzeile (tr) das entscheidende Merkmal, sondern die ID eines tbody.

Merke: Je präziser und korrekter man das Problem formuliert, desto besser sind die Antworten.

Insogfern kann man vordefinieren, wo der Bereich der eingefügten Zeile(n) sein soll und genau in den jeweiligen Bereich werden dann die Zusatzzeilen eingefügt, wenn die entsprechenden Klicks erfolgten.

Wenn man die Zeilen von vornherein so gruppiert hat - ja, dann hilft natürlich das tbody-Element.

Gruß, Rolf

Nanu? Gespaltene Persönlichkeit? 😉

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Jörg,

denn letztlich hat mir in meinem vorliegenden Fall die ID des tbody sehr viel geholfen.

Man geht fälschlicherweise oft von einem tbody aus

Das war mir durchaus bewusst. Aber wenn Du hinter einer Row einfügen willst, deren ID du hast, wozu brauchst Du dann eine tbody-ID? Die IDs der Rows müssen sowieso eindeutig über das ganze Dokument hinweg sein.

Hast Du etwa ein Konstrukt wie dieses gebaut?

<tbody id="body1">
  <tr id="row1">...</tr>
  <tr id="row2">...</tr>
  <tr id="row3">...</tr>
</tbody>
<tbody id="body2">
  <tr id="row1">...</tr>
  <tr id="row2">...</tr>
  <tr id="row3">...</tr>
</tbody>

Das ist falsches HTML. Dass die Browser es Dir verzeihen und CSS Regeln wie

#row2 { background-color: red; }
#body2 #row2 { color: green; }

so anwenden, als wäre die id nichts als eine Variante von class, ist eine andere Sache, aber es ist falsch.

Rolf

[Jörg]

Hallo Rolf,

Hast Du etwa ein Konstrukt wie dieses gebaut?

Nein, natürlich nicht.

Und wie gesagt, Du hast ganz genau meine Frage beantwortet und genau darum ging es mir.

Ich wollte nur nochmal auf den Satz eingehen, die ID des tboby brächte mir nichts.

Alles gut. 😉

Jörg

[dedlfix]

Tach!

Wie bringe ich denn Jquery bei, dass die neue Tabellenzeile genau nach der Tabellenzeile mit der ID 'XYZ' eingefügt werden soll?

Das ist bei Tabellenzeilen nicht anders als bei anderen Elementen im DOM. .after() und .insertAfter() fügt Geschwister ein.

dedlfix.

[Jörg]

Hallo dedlfix,

Das ist bei Tabellenzeilen nicht anders als bei anderen Elementen im DOM. .after() und .insertAfter() fügt Geschwister ein.

Ok, kannte ich nicht, werde ich mir anschauen, danke. 😀

Jörg