Mengubah Sel Tabel HTML dengan JavaScript

Misalkan ada tabel HTML #table. Misalkan tugas kita adalah melakukan sesuatu pada setiap sel tabel, misalnya, menulis teks '!' ke dalam masing-masing sel.

Mari kita bahas nuansa dalam menyelesaikan tugas seperti ini.

Seperti yang Anda ketahui, tabel HTML memiliki struktur dua dimensi: ada baris, dan di dalamnya ada sel. Kita bisa menyelesaikan tugas kita dengan cara berikut: ulangi baris dengan loop dan dalam setiap baris ulangi sel dengan loop dan lakukan tindakan yang kita perlukan pada mereka. Artinya, skema solusi yang diberikan mirip dengan cara kita membuat tabel seperti itu, mengisinya dengan baris dan sel.

Namun, dalam hal ini, dua loop bersarang akan berlebihan: kita bisa langsung mendapatkan semua td dan mengulangnya dengan loop, melakukan operasi yang diperlukan. Mari kita lakukan ini:

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

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

Misalkan diberikan tabel HTML dengan angka dan sebuah tombol. Saat tombol ditekan, gandakan angka di setiap sel tabel.