document.getElementById('tbl').children(0).appendChild(oRow);
// document.getElementById('tbl') <-- 지정된 개체
// children(0) <-- 의 첫번째(0) 자식개체
// appendChild(oRow) <- 를 기준으로(즉 기준은첫번째 자식개체) 그 부분에 자식 개체를 추가함
예제코드
<%@ 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>Insert title here<⁄title>
<script src="http:⁄⁄code.jquery.com⁄jquery-1.7.js"><⁄script>
<script language="javascript">
function insertRow(){
oRow = document.createElement("tr");
oCel0=document.createElement("td");
oCel1=document.createElement("td");
oRow.appendChild(oCel0);
oRow.appendChild(oCel1);
oCel0.innerHTML='<INPUT MAXLENGTH=30 TYPE="TEXT" NAME="TXT_CTF_NAME" VALUE="1열추가">'; ⁄⁄ 행안에 input text 추가
oCel1.innerHTML='<INPUT MAXLENGTH=9 TYPE="TEXT" NAME="TXT_CTF_GET_DATE" VALUE="2열추가">';
tbl.appendChild(oRow);
}
<⁄script>
<⁄head>
<body>
<input type="button" value="추가" onclick="insertRow();">
<table id="tbl">
<tr>
<td>1<⁄td>
<td>2<⁄td>
<⁄tr>
<⁄table>
<⁄body>
<⁄html>
결과화면
'JavaScript&Web' 카테고리의 다른 글
| [JavaScript] select 태그 이용하기 (0) | 2013.08.17 |
|---|---|
| [Javascript] 빈칸체크하기 간단예제 (0) | 2013.05.21 |
| [JavaScript] innerHTML 활용 예제 (0) | 2013.03.31 |
| [JavaScript] click 이벤트 발생 예제 (0) | 2013.03.31 |
| [JavaScript] jquery를 가지고 css 주기 (0) | 2013.03.31 |