ආහාර කැල්ක්යුලේටරයේ නව ගිණුම්කරණය එක් කිරීම

පළමුව, අපි බොත්තම ඔබොත් මේසයට නව පේළියක් සමඟ ගිණුම්කරණයක් එක් වන පරිදි කරමු:

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);
});

මා විසින් ඉදිරිපත් කරන ලද විසඳුම, කෙසේ වෙතත්, කේතය නැවත නැවත භාවිතා කිරීමේ පැහැදිලි ගැටළු ඇත: ඇත්ත වශයෙන්ම සෑම කොටුවක් සඳහාම අපි එකම කේතය ලියන්නෙමු.

මේසයේ කොටුවක් සෑදීම සඳහා යම් ශ්‍රිතයක් තිබීම සුදුසුය. මෙම ශ්‍රිතය පළමු පරාමිතියක් ලෙස මේස පේළියේ සබැඳියක් ලබා ගනිමු, දෙවන පරාමිතිය - මේස කොටුවේ ලේඛනය මේසය, සහ තෙවනුව - CSS පන්තියේ නම කොටුව:

function createCell(tr, value, name) {
	
}

එවැනි ශ්‍රිතයක් තිබීම අපට ලිවීමට හැකියාව ලබා දෙයි ඉහත කේතය පහත පරිදි නැවත ලියන්න:

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);
});

මා විසින් විස්තර කර ඇති ශ්‍රිතය ක්‍රියාත්මක කරන්න createCell.

නව ගිණුම්කරණයක් එක් කිරීම සඳහා මගේ කේතය පිටපත් කරන්න. මේසයට නව ගිණුම්කරණයක් එක් කිරීම පරීක්ෂා කරන්න.

ශ්‍රිතය වෙනස් කරන්න createCell එම, එය හරහා ආපසු ලබා දෙනු ඇත return සෑදූ මේසයේ කොටුව.