Mengubah Sel Jadual HTML dengan JavaScript

Katakan terdapat satu jadual HTML #table. Katakan tugas kita adalah untuk melakukan sesuatu pada setiap sel jadual, contohnya, menulis teks '!' dalam setiap satu daripadanya.

Mari kita bincangkan nuansa penyelesaian tugas sedemikian.

Seperti yang anda tahu, jadual HTML mempunyai struktur dua dimensi: terdapat baris, dan di dalamnya terdapat sel. Kita boleh menyelesaikan tugas kita dengan cara berikut: ulangi baris dengan gelung dan dalam setiap baris ulangi sel dengan gelung dan lakukan tindakan yang kita perlukan ke atasnya. Iaitu, skema penyelesaian yang diberikan adalah serupa dengan cara kita mencipta jadual sedemikian, mengisinya dengan baris dan sel.

Walau bagaimanapun, dalam kes ini, dua gelung bersarang akan berlebihan: kita boleh hanya mendapatkan semua td dan mengulanginya dengan gelung, melakukan operasi yang diperlukan. Mari lakukan ini:

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

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

Katakan diberikan satu jadual HTML dengan nombor dan satu butang. Apabila butang ditekan, gandakan nombor dalam setiap sel jadual dua kali ganda.