1. empty()와 append() - 테이블 동적 생성하기
<!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="utf-8" >
<title> jquery </title>
<style>
.yellow{background-color:yellow;}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function (){
//태그안의 내용 초기화
$('#myspan').empty();
//동적 태그 추가
var strHtml = $("<a href=''>네이년</a><hr />");
$('#myform').append(strHtml);
//테이블 동적 생성
$('#btn').click(function(){
$('#mytable').empty();
var row = $('#row').val();
var col = $('#col').val();
var strTable = "<table border='1'>";
for(var i=0;i<row;i++){
strTable += "<tr>";
for(var j=0;j<col;j++){
strTable += "<td>" + (i+1) + "행, " + (j+1) + "열</td>";
}
strTable += "</tr>";
}
strTable += "</table>";
$('#mytable').append(strTable);
});
});
</script>
</head>
<body>
<!-- 동적으로 태그추가-->
<span id="myspan"><b>여기에 태그 추가</b></span>
<!-- 동적으로 테이블추가-->
<input type="text" id="row" />행
<input type="text" id="col" />행
<input type="button" id="btn" value="테이블 동적 생성" />
<div id="myform"></div>
<div id="mytable"></div>
</body>
</html>
'강좌 > jQuery' 카테고리의 다른 글
| 제이쿼리(jQuery) - 조작 함수(manipulate) (0) | 2013.04.23 |
|---|---|
| 제이쿼리(jQuery) - DOM요소의 앞/뒤에 요소 추가 (0) | 2013.04.23 |
| 제이쿼리(jQuery) Traversing (0) | 2013.04.23 |
| 제이쿼리(jQuery) - 폼 요소의 값 가져오기 및 설정 (0) | 2013.04.22 |
| jQuery Attributes(jQuery로 요소의 속성 변경하기, 맵 이용) - 3 (0) | 2013.04.22 |
