JavaScript에서 innerHTML 속성을 활용하면 테이블 셀(td) 안에 들어 있는 내용을 간단하게 읽어올 수 있습니다. 이 속성은 해당 요소의 내부 HTML을 그대로 문자열 형태로 반환하기 때문에, 셀의 텍스트뿐 아니라 포함된 태그까지 함께 확인할 수 있습니다.
예제 코드
아래 예제는 버튼을 클릭하면 테이블의 첫 번째 행(row) 중 첫 번째 셀의 innerHTML 값을 화면에 출력하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<script>
function cellFunc(x) {
var cell = document.getElementById(x).rows[0].cells;
document.write(cell[0].innerHTML);
}
</script>
</head>
<body>
<table style="border:2px solid black" id="newtable">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
</table>
<p>
<input type="button" onclick="cellFunc('newtable')" value="Display Table Cell">
</p>
</body>
</html>
코드 동작 원리
- document.getElementById(x): id가 "newtable"인 테이블 요소를 문서에서 찾아 반환합니다.
- rows[0]: 테이블의 첫 번째 행(tr)에 접근합니다.
- cells: 해당 행에 포함된 모든 셀(td)의 컬렉션을 가져옵니다.
- cell[0].innerHTML: 첫 번째 셀의 내부 HTML 값, 즉 "One"이라는 텍스트를 읽어옵니다.
버튼을 클릭하면 cellFunc 함수가 실행되어 첫 번째 셀의 내용이 화면에 출력됩니다. 이처럼 rows와 cells 컬렉션과 innerHTML 속성을 조합하면 테이블의 특정 위치에 있는 데이터를 손쉽게 조회할 수 있습니다.