jquery json data, $.each

• jquery json 형식 데이터를 이용해 table 만들기

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

$(document).ready(function(){     var emp=[              {empno:"100",name:"Taeyeon",job:"과장"},              {empno:"200",name:"Seohyun",job:"막내"},              {empno:"300",name:"Tiffany",job:"해외마케팅 담당"}              ];          $.each(emp,function(index,mem){         $("#table").append("<tr class='emptr'><td>"+mem.empno+"         </td><td>"+mem.name+"</td><td>"+mem.job+"</td></tr>");     })          $(".emptr").click(function(){         $(this).children().addClass("color");         $("#detail").empty();         $("#detail").append( "<tr><td colspan='2'>상세내용</td></tr><tr><td         >번호</td><td class='show'></td></tr><tr><td>이름</td><td class='show'></td>         /tr><tr><td>직책</td><td class='show'></td></tr>");         $(this).children().each(function(index){             $(".show").eq(index).append($(this).text());                     })     })      }) Colored by Color Scripter

cs

json data 만들기

• var emp [ {속성명 : 속성값 , 속성명 : 속성값 } , { ...반복];

$.each 를 활용한 json data 출력

• $.each( "함수에 사용될객체" , function( index=인덱스 , 배열에 사용될 객체)
•           배열에 사용될 객체 . 객체의 속성값 } 

• contents() : 공백을 포함한 그객체안에 들어있는 객체를 전부 가져옴
• $("h1").contents() : h1하위에 있는 객체들