사실 학교 다니면서도 웹쪽으로는 해본적이 많이 없어서 자바 스크립트의 사용에 관해서는 첫 걸음마를 걷는 아이와 같다. 이것저것 작업해보다가 자바스크립트로 웹 페이지의 테이블 행을 추가로 만들어보았는데 여기에 글을 남겨서 보는 사람들마다 도움이 됬으면 합니다.
먼저 자바스크립트에서 많이 쓰이는 놈을 알아보자.
document.getElementById이다. 쉽게 말하자면
document객체 (문서내부)에서 getElementById( 요소의 id 값을 가져온다)라고 생각하시면 쉬울듯.
여기서 이제 table을 추가해서 본다.
<html> <head> <title> 테이블 만들기 연습 </title> ~~ 내용 삽입 ~~</head>
<body>
<table id = "test" > </table> <input type="button" onClick="javaScript:MakeRow" >
</body> </html>
여기서 이제 웹페이지를 실행했을때 button을 눌렀을 시 테이블의 <tr> <td>요소들이 들어가게 하면 된다. tr의 요소를 생성하는 함수는 insertRow(), td의 요소를 생성하는 함수는 insertCell()이다. 이제 동적으로 추가하기는 정말이지 쉽다.
<script language=JavaScript>
function MakeRow(){
document.getElementByID("test").insertRow().insertCell().innerHTML = " 테이블 생성 ";
}
</script>
이렇다면 위의 버튼을 누를때마다 "테이블 생성"이라는 텍스트를 가진 테이블 행이 추가된다. 더 깊은 내용은 다음에 글을 정리한 후 올리겠습니다.
[JS] 자바 스크립트 텍스트 박스 글자수 체크하기 (0) | 2014.11.06 |
---|