<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function insertRow(){
//1. Data
var objTable = document.getElementById("idTable");
//2. Check
//3. Process
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerHTML = "1";
td2.innerHTML = "2";
tr.appendChild(td1);
tr.appendChild(td2);
objTable.appendChild(tr);
//4. Print
}
function insertRowText(){
//1. Data
var objTable = document.getElementById("idTable");
//2. Check
//3. Process
var html = "";
html += "<tr>";
html += " <td>";
html += " 1";
html += " </td>";
html += " <td>";
html += " 2";
html += " </td>";
html += "</tr>";
objTable.innerHTML += html;
//4. Print
}
</script>
</head>
<body>
<input type="button" value="click1" onclick="insertRow();"><br/>
<input type="button" value="click2" onclick="insertRowText();">
<table id="idTable" width="400" border="1">
</table>
</body>
</html>
이것도 버튼을 클릭하면 내용이 추가되는 간단한 내용이다.
두개의 JavaScript가 있는데 똑같은 내용이 추가 되지만 코드는 다른 예제.
한개는 createElement로 Element를 추가하는 코드이고,
한개는 변수에 Element를 문자로 저장하고 그 문자열을 innerHTML로 추가하는 코드.
다른 기술로는 Ajax가 있다.
이건 나중에...
'DHTML' 카테고리의 다른 글
| DHTML 1st...! (0) | 2009.11.04 |
|---|
