Ürün Hesaplayıcısında Alışveriş Düzenleme

Şimdi hücre düzenlemeyi uygulayalım. Koşula göre, yalnızca ilk 3 hücre düzenlenebilir.

İşte onlar:

createCell(tr, name.value, 'name');
createCell(tr, price.value, 'price');
createCell(tr, amount.value, 'amount');

Açıkçası, düzenleme kodu her hücre için aynı olacak: çift tıklamada hücre metni yerine bir input görünmeli, ve inputta Enter tuşuna basıldığında içeriği yeni hücre metni haline gelmelidir.

Bir tablo hücresini parametre olarak alan ve ona düzenleme yeteneği bağlayan bir fonksiyon yapmayı öneriyorum:

function allowEdit(td) {
	td.addEventListener('dblclick', function() {
		
	});
}

O zaman fonksiyonumuzu aşağıdaki şekilde uygulayabiliriz:

allowEdit(createCell(tr, name.value, 'name'));
allowEdit(createCell(tr, price.value, 'price'));
allowEdit(createCell(tr, amount.value, 'amount'));

Dikkatli bir okuyucu, tüm hücrelerin aynı olmadığını fark edebilir: çünkü fiyat hücresi veya miktar hücresi değiştiğinde, cost sütunundaki alışveriş maliyeti değişmeli, ve ayrıca toplam tutarın yeniden hesaplanması yapılmalıdır.

Bu nüansı, bir sonraki derste çözülmek üzere bir sonraki alt görev olarak bırakacağız. Başlangıç olarak önce sadece, yeniden hesaplama olmadan, üç hücremizin düzenlenebilir olmasını sağlayalım.

Tarafımdan açıklanan hücre düzenlemeyi uygulayın.