간만에 포스팅 올리네.
innerHTML을 사용해서 동적 테이블 생성하는 방법에 대해서 적어 보겠다.
동적 테이블은 html 소스상에는 <table id="test"></table> 라는 테이블만 만들어놓고
이후 필요시마다 test 테이블에 필드를 추가/제거 할 수 있는 테이블을 말한다.
좀 더 자세히 알아보려면 DOM(Document Object Model)을 공부해보자.
간단하게 동적 테이블을 생성하는 코드를 적어 본다.
소스 코드가 상당히 길다.
실제 사용중인 소스를 정리해서 만든거라 그럴 수 밖에 없지.
위 소스 사용시 주의할 점은 innerHTML 에서 tr 태그에 rowIndex를 설정하는건 현재 내가 추가할 위치, 삭제할 위치를 파악할 중요한 녀석이기 때문에
적절히 사용해야 한다.
rowIndex, clickedRowIndex를 사용하기 위해서는 tr 태그에 onmouseover = "부모테이블명.clickedRowIndex=this.rowIndex" 를 꼭 써줘야 한다.
innerHTML을 사용해서 동적 테이블 생성하는 방법에 대해서 적어 보겠다.
동적 테이블은 html 소스상에는 <table id="test"></table> 라는 테이블만 만들어놓고
이후 필요시마다 test 테이블에 필드를 추가/제거 할 수 있는 테이블을 말한다.
좀 더 자세히 알아보려면 DOM(Document Object Model)을 공부해보자.
간단하게 동적 테이블을 생성하는 코드를 적어 본다.
소스 코드가 상당히 길다.
실제 사용중인 소스를 정리해서 만든거라 그럴 수 밖에 없지.
위 소스 사용시 주의할 점은 innerHTML 에서 tr 태그에 rowIndex를 설정하는건 현재 내가 추가할 위치, 삭제할 위치를 파악할 중요한 녀석이기 때문에
적절히 사용해야 한다.
rowIndex, clickedRowIndex를 사용하기 위해서는 tr 태그에 onmouseover = "부모테이블명.clickedRowIndex=this.rowIndex" 를 꼭 써줘야 한다.
'Programming > Html/Tag' 카테고리의 다른 글
[펌] flash와 div 간의 z-index 문제 (0) | 2011.05.13 |
---|---|
input type="text" 에 숫자만 입력 하기 (0) | 2010.07.06 |
텍스트 박스에서 엔터키 입력하면 이벤트 처리 되도록 하자. (0) | 2010.02.04 |
[html] 세로 스크롤만 표시하기 (0) | 2009.06.29 |
HTTP 500 내부서버오류 에러 해결 방법 (0) | 2009.05.18 |