|
  |
8년 전
|
<!DOCTYPE html>
<html>
<head>
<meta charset="euc-kr">
<title>jQuery에서 json 변수 사용(활용)법</title>
<script src="http://scriptmoa.cafe24.com/scriptmoa/jQuery/jquery-2.1.1.min.js"></script>
<script>
function showDisplayLayerFunc() {
var jsonObj = [];
$("table > tbody > tr").each( function( index ) {
jsonObj.push({
grade: $(this).children().eq(0).text(),
name: $(this).children().eq(1).text(),
number: $(this).children().eq(2).text()
});
});
for(i = 0; i < jsonObj.length; i++) {
$("#displayLayer").append("<input tepe='text' name='gradeName' value='"+ jsonObj[i].grade +" "+ jsonObj[i].name +" "+ jsonObj[i].number +"' /><br/>");
}
}
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>학년</th>
<th>이름</th>
<th>번호</th>
</tr>
</thead>
<tbody>
<tr>
<td>1학년</td>
<td>김철수</td>
<td>1번</td>
</tr>
<tr>
<td>1학년</td>
<td>이영희</td>
<td>2번</td>
</tr>
<tr>
<td>2학년</td>
<td>박승철</td>
<td>1번</td>
</tr>
<tr>
<td>2학년</td>
<td>최보람</td>
<td>2번</td>
</tr>
</tbody>
</table>
<p>
<button onclick="showDisplayLayerFunc()">입력</button>
</p>
<div id="displayLayer"></div>
</body>
</html>
설명
jQuery에서 json 변수를 사용하는 방법은 마치 자바스크립트 배열을 사용하는 것처럼 간단하고 편리합니다.
push() 메소드를 이용해서 변수를 원하는대로 넣을 수 있습니다.
jsonObj.push({
grade: "1학년",
name: "김철수",
number: "1번",
height: "177cm",
...
});
json 변수의 값을 가져올 때는 .grade, .name, .number 처럼 속성만 표시하면 됩니다.
for(i = 0; i < jsonObj.length; i++) {
jsonObj[i].grade +" "+ jsonObj[i].name +" "+ jsonObj[i].number
}
각 index 별로 호출하려면 jsonObj[0].grade, jsonObj[1].grade, jsonObj[2].grade ... 호출하시면 됩니다.
jsonObj[0].grade +" "+ jsonObj[0].name +" "+ jsonObj[0].number
jsonObj[1].grade +" "+ jsonObj[1].name +" "+ jsonObj[1].number
jsonObj[2].grade +" "+ jsonObj[2].name +" "+ jsonObj[2].number
... |
|
 추천 : 377 |
추천
목록
|
|
