HTML 테이블 셀 변경하기 in JavaScript

어떤 HTML 테이블 #table이 주어졌다고 가정해 봅시다. 우리 앞에 놓인 과제는 테이블의 각 셀에 대해 무언가를 하는 것입니다. 예를 들어, 각 셀에 '!'라는 텍스트를 쓰는 것이죠.

이러한 과제를 해결할 때의 세부 사항에 대해 논의해 보겠습니다.

아시다시피 HTML 테이블은 2차원 구조를 가집니다: 행이 있고, 그 안에 셀이 있습니다. 우리의 과제를 다음과 같이 해결할 수 있습니다: 행을 반복문으로 순회하고, 각 행 안에서 셀을 반복문으로 순회하여 필요한 작업을 수행하는 것입니다. 즉, 제시된 해결 방식은 우리가 테이블을 생성하고 행과 셀을 채울 때와 유사합니다.

그러나 이 경우, 두 개의 중첩된 반복문은 불필요할 수 있습니다: 단순히 모든 td를 가져와 반복문으로 순회하면서 필요한 작업을 수행할 수 있습니다. 이를 구현해 보겠습니다:

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

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

숫자가 있는 HTML 테이블과 버튼이 주어졌다고 가정합니다. 버튼을 클릭하면 테이블의 각 셀에 있는 숫자를 두 배로 늘리세요.