Thay đổi ô bảng HTML bằng JavaScript

Giả sử có một bảng HTML #table. Giả sử nhiệm vụ của chúng ta là làm gì đó với mỗi ô của bảng, ví dụ, viết vào mỗi ô đó văn bản '!'.

Hãy thảo luận về các sắc thái của việc giải quyết nhiệm vụ như vậy.

Như bạn đã biết, bảng HTML có cấu trúc hai chiều: có các hàng, và trong chúng là các ô. Có thể giải quyết nhiệm vụ của chúng ta như sau: lặp qua các hàng bằng vòng lặp và trong mỗi hàng lặp qua các ô bằng vòng lặp và thực hiện hành động chúng ta cần với chúng. Tức là sơ đồ giải pháp được đưa ra tương tự như cách chúng ta tạo ra một bảng như vậy, lấp đầy nó bằng các hàng và ô.

Tuy nhiên, trong trường hợp này, hai vòng lặp lồng nhau sẽ là thừa: có thể chỉ cần lấy tất cả td và lặp qua chúng bằng vòng lặp, thực hiện thao tác cần thiết. Hãy làm điều đó:

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

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

Giả sử có một bảng HTML với các số và một nút bấm. Khi nhấp vào nút, hãy tăng số trong mỗi ô của bảng lên gấp đôi.