var data 내에 든 녀석들을 있는만큼 차례대로 꺼내와서
table을 하나씩 붙여나가는 단순한 구조인데..
// (ㅇ_ㅇ)1 << 요렇게 표시 된 부분마다 원래 var형으로 묶어서 시도했었는데,
나와야할 녀석이 안나온다거나... 반만 나온다거나... 하더라구요.
그런데 (ㅇ_ㅇ)2 녀석은 또 묶어서 돌려야 정상적으로 출력이 되고...
td로 칸을 만들고 추가할때의 td,
tr로 행을 만들며 추가될때의 tr부분이라서 그런 것 같기는 한데..
이거다! 하고 정리를 못해서 알듯말듯 한 상태입니다...
이 바보야! 이거잖아! 하고 때려(....)주실 분 없으신가요? 아....
정말 쓸데없는 고민을 하고있는 느낌;;
********************************************************
<html>
<head>
<title></title>
<script type="text/javascript">
var data = { "friendlist":
{
"count" : 4,
"list" : [
{"name":"홍길동", "tel":"011-222-3333"},
{"name":"성춘향", "tel":"011-222-3334"},
{"name":"이몽룡", "tel":"011-222-3335"},
{"name":"오바마", "tel":"011-222-3336"},
{"name":"테스트", "tel":"123-456-7890"}
]
}
};
</script>
</head>
<body>
<h1> jQuery로 Dom Tree생성! </h1>
<hr>
<div id="Main"> /* 테이블이 생성될 위치 */
</div>
</body>
</html>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
var table = $("<table/>").attr("border","5").appendTo($("#Main"));
var trSet = $("<tr></tr>");
// var tdSet = $("<td></td>"); (ㅇ_ㅇ)1
$("<td></td>").attr("width","120").text("이름").appendTo(trSet);
$("<td></td>").attr("width","180").text("전화번호").appendTo(trSet);
trSet.appendTo(table);
for(var i=0; i < data.friendlist.list.length; i++)
{
var trSet=$("<tr></tr>"); // (ㅇ_ㅇ)2
$("<td></td>").attr("width","120").text(data.friendlist.list[i].name).appendTo(trSet);
$("<td></td>").attr("width","180").text(data.friendlist.list[i].tel).appendTo(trSet);
trSet.appendTo(table);
}
</script>
var 형으로 묶는다는 표현은 옳지않고, var는 변수를 선언한다는 거니까..
var tdSet1 = $("<td></td>");
var tdSet2 = $("<td></td>");
tdSet1.attr("width", "120").text("이름").appendTo(trSet);
tdSet2.attr("width", "180").text("전화번호").appendTo(trSet);
하시면 문제가 없습니다. 아니면
var tdSet;
tdSet = $("<td></td>");
tdSet.attr("width", "120").text("이름").appendTo(trSet);
tdSet = $("<td></td>");
tdSet.attr("width", "180").text("전화번호").appendTo(trSet);
로 해주셔도 되고, 적어놓으신거 처럼 익명객체로 만들어서 바로 넣어버려도 됩니다.
2번의 경우는 변수의 scope 문제입니다. var로 변수를 선언하면, for loop 내의 local scope를 가진 변수가 되니
내부에서 쓰고 바로 폐기되지만, var가 없다면, 바깥에 선언된((ㅇ_ㅇ)1 바로 위에서) trSet을 쓰게 됩니다.
따라서 위에서 설명드린 바와 같이 같은 tr(헤더 td를 넣은 그녀석)에다 데이터 td를 마구 집어넣는 꼴이되어
테이블이 박살이 나게 되겠죠..
1. 변수의 개념
2. 레퍼런스란?
3. 변수의 스코프
정도만 좀더 정리하시면 위의 문제는 아주 쉽게 이해되실 겁니다.
그럼 이만..