58.jQuery - jQuery.getScript ( 09.Ajax )
| 03.jQuery.getScript.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>하나의 완성된 자바스크립트 파일을 동적 로드/실행</title>
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ $('#btn').click(function() { //아래 코드가 실행되는 시점에 js 파일의 기능 실행됨 $.getScript('03.jQuery.getScript.js');
});
});
</script> </head> <body>
<input type="button" id="btn" value="표그리기" />
<div id="ctlGrid">
</div> </body> </html> |
| 03.jQuery.getScript.js [ JScript.js파일 ] |
|
//JSON 데이터 var
tableData = [
{ "Num":
"1", "Name":
"홍길동", "Title":
"안녕" },
{ "Num":
"1", "Name":
"백두산", "Title":
"방가" },
{ "Num":
"1", "Name":
"임꺽정", "Title":
"또봐" } ];//입력
var htmls = '';
htmls += "<table
border='1'>"
htmls += "<tr><th>번호</th><th>이름</th><th>제목</th></tr>";
$.each(tableData, function()
{
htmls += "<tr>";
htmls += "<td>"
+ this['Num'] + "</td>";
htmls += "<td>"
+ this['Name'] + "</td>";
htmls += "<td>"
+ this['Title'] + "</td>";
htmls += "</tr>";
}); //처리&디자인
htmls += "</table>";
$('#ctlGrid').html(htmls);
//ctlGrid는 포함될 HTML에 있는 레이어 //출력 |
| 결과화면 |
[그림58-1] |
03.jQuery.getScript.htm
03.jQuery.getScript.js