Kuongeza Kununua Kipya katika Kikokotoo cha Bidhaa

Kwa kuanza tufanye ili kwa kubonyeza kitufe kwenye jedwali kuongezewa safu mpya ya kununua:

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

Ufumbuzi niliotoa, hata hivyo, una matatizo dhahiri ya kurudia kificho: kwa kweli kwa kila seli tunaandika kificho kile kile.

Ingekuwa sawa kuwa na baadhi ya kitendo kwa kuunda seli ya jedwali. Hebu kitendo hiki kichukue kigezo cha kwanza kama kiungo kwa safu ya jedwali, kigezo cha pili - maandishi ya seli ya jedwali, na cha tatu - jina la darasa la CSS la seli:

function createCell(tr, value, name) {
	
}

Kuwa na kitendo kama hicho tungeliweza kuandika tena kificho kilioonyeshwa hapo juu kama ifuatavyo:

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

Tekeleza kitendo nilichoelezea createCell.

Nakili kificho changu kwa kuongeza kununua kipya. Jaribu kuongeza kununua kipya kwenye jedwali.

Rekebisha kitendo createCell ili kikirudishe kupitia return seli iliyoundwa ya jedwali.