Bearbeitung von Einkäufen im Produktrechner
Lassen Sie uns nun die Bearbeitung von Zellen implementieren.
Laut Bedingung können nur die ersten
3 Zellen bearbeitet werden.
Hier sind sie:
createCell(tr, name.value, 'name');
createCell(tr, price.value, 'price');
createCell(tr, amount.value, 'amount');
Offensichtlich wird der Code für die Bearbeitung
für jede Zelle gleich sein: Bei einem Doppelklick
soll anstelle des Zellentextes ein Input erscheinen,
und beim Drücken von Enter im Input
soll sein Inhalt zum neuen Text der Zelle werden.
Ich schlage vor, eine Funktion zu erstellen, die als Parameter eine Tabellenzelle annimmt und an sie die Bearbeitungsmöglichkeit bindet:
function allowEdit(td) {
td.addEventListener('dblclick', function() {
});
}
Dann können wir unsere Funktion wie folgt anwenden:
allowEdit(createCell(tr, name.value, 'name'));
allowEdit(createCell(tr, price.value, 'price'));
allowEdit(createCell(tr, amount.value, 'amount'));
Ein aufmerksamer Leser könnte bemerken,
dass nicht alle Zellen gleich sind: Denn bei einer Änderung
der Zelle mit dem Preis oder der Zelle mit der Menge sollte
sich die Einkaufskosten in der Spalte cost ändern,
und auch eine Neuberechnung des Gesamtbetrags durchgeführt werden.
Diese Nuance lassen wir als nächste Teilaufgabe zur Lösung in der nächsten Lektion. Zuerst machen wir einfach die Bearbeitungsmöglichkeit für unsere drei Zellen, ohne Neuberechnung.
Implementieren Sie die von mir beschriebene Bearbeitung der Zellen.
