Hinzufügen eines neuen Einkaufs im Produktrechner

Lassen Sie uns zunächst dafür sorgen, dass bei einem Klick auf die Schaltfläche eine neue Zeile mit einem Einkauf zur Tabelle hinzugefügt wird:

add.addEventListener('click', function() {
	let tr = document.createElement('tr');
	
	let td;
	
	td = document.createElement('td');
	td.textContent = name.value;
	td.classList.add('name');
	tr.appendChild(td);
	
	td = document.createElement('td');
	td.textContent = price.value;
	td.classList.add('price');
	tr.appendChild(td);
	
	td = document.createElement('td');
	td.textContent = amount.value;
	td.classList.add('amount');
	tr.appendChild(td);
	
	td = document.createElement('td');
	td.textContent = price.value * amount.value;
	td.classList.add('cost');
	tr.appendChild(td);
	
	td = document.createElement('td');
	td.textContent = 'удалить';
	td.classList.add('remove');
	tr.appendChild(td);
	
	table.appendChild(tr);
});

Die von mir vorgestellte Lösung hat jedoch offensichtliche Probleme mit Code-Duplikation: im Grunde schreiben wir für jede Zelle denselben Code.

Es wäre angebracht, eine Funktion zur Erstellung einer Tabellenzelle zu haben. Diese Funktion sollte als ersten Parameter einen Verweis auf die Tabellenzeile, als zweiten Parameter - den Text der Tabellenzelle und als dritten - den Namen der CSS-Klasse der Zelle erhalten:

function createCell(tr, value, name) {
	
}

Mit einer solchen Funktion könnten wir den obigen Code wie folgt umschreiben:

add.addEventListener('click', function() {
	let tr = document.createElement('tr');
	
	createCell(tr, name.value, 'name');
	createCell(tr, price.value, 'price');
	createCell(tr, amount.value, 'amount');
	createCell(tr, price.value * amount.value, 'cost');
	createCell(tr, 'удалить', 'remove');
	
	table.appendChild(tr);
});

Implementieren Sie die von mir beschriebene Funktion createCell.

Kopieren Sie meinen Code zum Hinzufügen eines neuen Einkaufs. Testen Sie das Hinzufügen eines neuen Einkaufs zur Tabelle.

Modifizieren Sie die Funktion createCell so, dass sie die erstellte Tabellenzelle per return zurückgibt.