SyntaxError: unterminated string literal

[Rolf B]

Hallo hmm,

der Fehler wird gelöst, weil dein onclick-Event vorher nicht in Anführungszeichen stand, dein href dagegen schon.

Cleancode ist diese HTML-Wüste definitiv nicht. Wir hatten das Thema ja hier schonmal.

1. Die Klasse 'form-control' wegzunehmen, hatte ich da angeraten - aber das ist falsch; ich kannte Bootstrap nicht.
2. Trotzdem wäre es sinnvoll, die Zellen erstmal als Array aufzubauen und nachher zu joinen. Die Übersicht im Code ist deutlich größer.
3. Deine <td> sind nicht balanciert, da fehlen </td>
4. Dein REMOVE-Button ist aus mehreren Gründen kaputt. Zum ersten hat der REMOVE-Button eine ID. Diese vergibst Du in jeder Zeile neu. IDs müssen aber eindeutig sein. Zum zweiten registrierst Du den click() Handler auf eine Klasse namens addBtnRemove, nicht auf die ID (CSS Selektor für ID beginnt mit #, für Klasse beginnt mit .). WÜRDEST Du nun im HTML aus id="addBtnRemove" ein class="addBtnRemove" machen, dann würde zwar der Klick-Handler angeschlossen, aber nachdem Du 5 Zeilen hinzugefühgt hast, hätte die 1. Zeile fünf Klick-Handler, die 2. Zeile vier, die 3. drei - weil Du nämlich die Event-Registrierung für alle Buttons dieser Klasse in der ganzen Tabelle machst.

Lösung zu 4: Dreh den Append rum. Es gibt $(container).append(inhalt) und $(inhalt).appendTo(container). Der entscheidende Unterschied ist, dass append() den Container zurückgibt und appendTo ein jQuery-Objekt, das den neuen Inhalt beschreibt. Und damit kannst Du nach appendTo gleich weitermachen:

var newRow = "<tr>..htmlwüste..</tr>";

$(newRow).appendTo("#tableAddRow")
         .find(".addBtnRemove")
         .click(function() { ... clickhandler ... });

Andersrum würde der .find auch was finden, aber das wären alle Buttons der Table und dann hast Du das zuvor beschriebene Mehrfach-Handler Problem.

Rolf