HTML Tablo Hücrelerini JavaScript ile Değiştirme

Bir HTML tablosu #table verilmiş olsun. Önümüzdeki görev, her bir hücreyle bir şeyler yapmaktır, örneğin, her birine '!' metnini yazmak.

Bu tür bir görevin çözümünün nüanslarını tartışalım.

Bildiğiniz gibi, bir HTML tablosunun iki boyutlu bir yapısı vardır: satırlar ve onların içinde hücreler bulunur. Problemimizi şu şekilde çözebiliriz: satırları döngüyle gezmek ve her satırda hücreleri döngüyle gezerek onlarla istediğimiz işlemi yapmak. Yani, sunulan çözüm şeması, böyle bir tabloyu satır ve hücrelerle doldurarak oluşturma şekline benzer.

Ancak, bu durumda, iki iç içe döngü gereksiz olacaktır: basitçe tüm td öğelerini alıp bir döngü ile gezerek gerekli işlemi yapabiliriz. Bunu yapalım:

let tds = document.querySelectorAll('#table td');

for (let td of tds) {
	td.textContent = '!';
}

Sayılar içeren bir HTML tablosu ve bir buton verilmiş olsun. Butona tıklandığında, tablodaki her hücredeki sayıyı iki katına çıkarın.