JAVASCRIPT/동적테이블 변경
DOM을 이용한 테이블 변경(테이블전체 또는 일부변경)
정윤재
2008. 10. 30. 11:44
보통 HTML의 일부분을 바꾸려면
<div id="change"> xxxx</div>
나 span으로 영역을 지정한 다음
자바스크립트에서 document.getElementById("change"); 한다음
innerHTML을 써서 바꾸는 형식을 많이 쓴다.
하지만, table 안의 경우 어떻게 할 것인가?
td에 id를 줘서 바꾼다 라는 것을 생각할 수 있다. 하지만 이경우
안되는 경우가 잦다. 왜 안되는지 원인까지는 파악하지는 못했지만
바꿀수 있는 방법은 알게 되었다.
아래의 코드를 참조 하면 table 전체를 바꿀 수도 있고
일부 td만을 바꿀 수도 있다.
당연히 제가 만들고 test 해본 내용입니다.
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>테이블 변경</title>
<script type="text/javascript">
function tblChange(){
var tbl = document.getElementById("tableChange");
tbl.rows[0].cells[0].innerHTML = "홍당무";
//rows는 tr(몇번째 tr인가 ==>0 부터 시작함)
//cells는 td
}
</script>
</head>
<body>
<center>
<form name="f1">
<table id="tableChange" border="1">
<tr><td>정윤재</td></tr>
<tr><td><input type="button" value="바꾸기" onClick="tblChange()"></td></tr>
</table>
</form>
</center>
</body>
</html>