Menambah Pembelian Baharu dalam Kalkulator Produk

Sebagai permulaan, mari kita buat supaya apabila tombol ditekan, baris baharu dengan pembelian ditambahkan ke dalam jadual:

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 = 'padam';
	td.classList.add('remove');
	tr.appendChild(td);
	
	table.appendChild(tr);
});

Penyelesaian yang saya berikan, bagaimanapun, mempunyai masalah yang jelas dengan penduaan kod: sebenarnya untuk setiap sel kami menulis kod yang sama.

Adalah wajar untuk mempunyai beberapa fungsi untuk mencipta sel jadual. Biarkan fungsi ini menerima rujukan kepada baris jadual sebagai parameter pertama, teks sel jadual sebagai parameter kedua, dan nama kelas CSS sel sebagai parameter ketiga:

function createCell(tr, value, name) {
	
}

Dengan mempunyai fungsi sedemikian, kami boleh menulis semula kod di atas seperti berikut:

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, 'padam', 'remove');
	
	table.appendChild(tr);
});

Laksanakan fungsi createCell yang saya terangkan.

Salin kod saya untuk menambah pembelian baharu. Uji penambahan pembelian baharu ke dalam jadual.

Ubah suai fungsi createCell supaya ia mengembalikan sel jadual yang dicipta melalui return.