<BODY>
<TABLE id="a1" border=1>
</TABLE>
<input type="button" value="추가">
</BODY>
id="a1" 이라는 이라는 테이블이 존재하는데 속이 비어있죠~
그렇다면 저 안에 무언가 들어 가게 하기 위해서는 <tr><td></td></tr> 이렇게 있어야 한개의 테이블이 형성된다는 건 html 을 안다면 아실내용인거니 그걸 어떻게 생성하느냐~
초간단하게 설명하자면
insertRow() -> tr 을 만듭니다.
insertCell() -> td 를 만들어 냅니다.
그럼 inRow() 함수를 다음처럼 추가하면
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function inRow(){
document.getElementById('a1').insertRow().insertCell().innerHTML = "test";
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<TABLE id="a1" border=1>
</TABLE>
<input type="button" value="추가">
</BODY>
순서대로 읽으면 해석 끝나는 군요 ㅋ
document(현재페이지에).getElementById('a1')(a1이라는 id를 가진곳을찾아서).insertRow()(tr을넣고).insertCell(td를넣은뒤).innerHTML(들어가게 하라) = "test";(이런내용을...)
흠...안쉽나..?
암튼 이렇게 해 놓으면 함수를 호출할때 마다 test라고 써진 부분이 계속 추가가 되겠죠
그럼 test 대신 뭔가 이름을 가진걸 계속 추가를 해줘봅시다. 다음과 같이...ㅋ
<!--
function inRow(){
Merong = "<input type='text' name='a2'>";
document.getElementById('a1').insertRow().insertCell().innerHTML = Merong;
}
//-->
그럼 name=a2 라고 가진 textbox 가 계속 생성이 되겠죠?
자~ 이때!!!! getElementsByName 이 JJAN 하고 등쟝해서 생성된 a2의 총갯수를 ~ 배열로 읽어오게 됩니다.
그럼 또 다시 이렇게 추가를 해줍니다.
<!--
function inRow(){
Merong = "<input type='text' name='a2'>";
JJAN = document.getElementsByName('a2') //a2를 배열로 불러와서 JJAN 에 담습니다.
document.getElementById('a1').insertRow().insertCell().innerHTML = Merong + JJAN.length;
}
//-->
length 를 찍어주면 현재 갯수가 어케 찍히는지 알겠죠~ ? (배열은 0부터 시작하니깐 (JJAN.length+1)로 해서 산식을 먼저 더해주면 1부터 출력이 되겠군요)
'프로그래밍 > Javascript' 카테고리의 다른 글
| 이메일 체크 - 정규표현식으로 (0) | 2009.02.11 |
|---|---|
| 선택 영역 복사하기 자바스크립트 (0) | 2009.02.11 |
| table 에 tr 추가 하기 (0) | 2009.02.11 |
| Microsoft.XMLHTTP과 Msxml2.XMLHTTP의 차이 (0) | 2009.02.11 |
| substr 과 substring 의 차이점 (0) | 2009.02.11 |