Hallo Gunnar,

ja, natürlich. Die drei Zellen mit add, edit und del darin müssen nicht mit textContent, sondern mit innerHTML befüllt werden und dann als Button. Dieser kann mit CSS auf die Größe des td aufgeblasen werden (falls die Datenspalten mehrzeilig sein können).

row.insertCell().innerHTML = "<button type='button' name='add'>Add</button>";

und der erste Versuch im Click-Handler muss sein:

const button = event.target.closest("button");

Ist das null, muss man überlegen, ob die Behandlung eines Klick-Events in einer der anderen Zellen Sinn ergibt UND wie man diese Aktion alternativ auslösen kann. Aber da dort nur Strings abgelegt werden, dürften nur die Buttons von Belang sein.

Die EDIT Aktion könnte die Textinhalte der Zeile in input-Elemente verpacken. Aber dann braucht man weitere Buttons: Save und Cancel. Diese könnten die existierenden Add/Edit/Del Buttons ersetzen.

Die Semantik des Add Buttons ist mir eh nicht klar geworden, ich habe aber nicht lange drüber nachgedacht und mich auf die Erstellung der Tabelle beschränkt. Soll ein Add eine neue Zeile UNTER der geklickten Zeile anlegen? Das wäre ein INSERT und damit wäre mein Gedanke mit dataset.index Unsinn (weil die Indexe bei einem Insert ins dataPoints Array nicht mehr stimmen). Oder doch eher am Ende der Tabelle (dann gehört der Button aber über die Tabelle und nicht zu den Zeilen)? Da ist noch einiges an Konzeption zu leisten.

@klawischnigg - so ganz verstehe ich Dich nicht, die Buttons, von denen hier die Rede ist, sind Row-Buttons für Row-Aktionen. Wenn Du Aktionen pro Zelle haben möchtest, wird das Ganze aufwändiger, dann müsste man vielleicht doch den Zellen einen tabindex geben, damit man per Tastatur durchkommt, und sich eine passende Tastaturbedienung für die Zellaktionen ausdenken. Oder aber doch einen Mini-Button oben rechts in jede Zelle setzen, der für die Zelle ein Aktionsmenü öffnet. Oder doch ein Zeilenbutton für Aktionen. UI Design bietet viele Möglichkeiten…

Rolf