HTML 테이블 내의 모든 셀(td) 요소에 IF 조건문을 적용하려면 document.querySelectorAll()과 forEach() 메서드를 함께 사용하면 됩니다. querySelectorAll()은 지정한 선택자와 일치하는 모든 요소를 NodeList 형태로 반환하며, forEach()를 통해 각 요소를 순회하면서 원하는 조건 로직을 실행할 수 있습니다.
예제 코드
다음은 테이블의 각 셀을 순회하면서 IF 조건문으로 텍스트를 변경하는 전체 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<table>
<tr>
<td class="demo"> Java </td>
</tr>
<tr>
<td class="demo"> MySQL </td>
</tr>
<tr>
</tr>
</table>
</body>
<script>
document.querySelectorAll(".demo").forEach(function (obj) {
if (obj.innerText.trim() === "MySQL") {
obj.innerText = "Javascript";
}
if (obj.innerText.trim() === "MongoDB") {
obj.innerText = "Python";
}
});
</script>
</html>코드 설명
위 코드의 핵심 동작 방식은 다음과 같습니다.
1. 요소 선택: document.querySelectorAll(".demo")는 class가 "demo"인 모든 td 요소를 선택합니다.
2. 순회 처리: forEach() 함수가 선택된 각 요소를 하나씩 순회합니다.
3. 조건 판별: obj.innerText.trim()으로 공백을 제거한 텍스트 값과 특정 문자열(예: "MySQL", "MongoDB")을 비교합니다.
4. 값 변경: 조건이 일치하면 obj.innerText에 새로운 값을 할당하여 화면의 텍스트를 즉시 변경합니다.
실행 방법
위 프로그램을 실행하려면 코드를 anyName.html 또는 index.html로 저장합니다. 이후 VS Code 편집기에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 'Open with Live Server' 옵션을 선택하면 브라우저에서 바로 확인할 수 있습니다.
실행 결과
위 코드를 실행하면 다음과 같은 출력 결과를 얻을 수 있습니다.
테이블에서 "MySQL"이라는 텍스트를 가진 셀이 "Javascript"로 자동 변경된 것을 확인할 수 있습니다. 이처럼 querySelectorAll()과 forEach()를 조합하면 별도의 반복문 없이도 테이블의 여러 요소에 조건부 로직을 간결하게 적용할 수 있습니다.