[jQuery] JSON데이터를 활용한 table만들기
- 포로그래밍/jQuery
- 2020. 12. 10.
안녕하세요? 원주남자입니다~
외부json데이터파일을 통하여 html table를 만드는 예시를 알아보겠습니다.
현재 아래에 설명할 예제는 json_data.json이라는 파일을 통해 데이터를 추출할 예정인데요.
일반적으로는 지금예시와는 달리 서버단에서 DB에 저장된 데이터를 가공하여 json데이터로 만들어서 처리하는게 많을 것 같습니다.
json_data.json
[
{
"hp":"010-1234-1234",
"name":"김원주",
"address":"원주시 단계동"
},
{
"hp":"010-5234-1234",
"name":"김서울",
"address":"서울특별시 중랑구"
},
{
"hp":"010-7234-1234",
"name":"김부산",
"address":"부산광역시 해운대구"
}
]<html>
<head>
<meta charset="utf-8">
<title>title</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
var target = $('#target');
$.getJSON('json_data.json', function(members){
$.each(members, function(i, member){
var add_data = '';
add_data += '<tr>';
add_data += '<td>';
add_data += member.hp;
add_data += '</td>';
add_data += '<td>';
add_data += member.name;
add_data += '</td>';
add_data += '<td>';
add_data += member.address;
add_data += '</td>';
add_data += '</tr>';
target.append(add_data);
});
});
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>hp</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody id="target">
</tbody>
</table>
</body></html>간단하게 스크립트소스를 설명하자면 tbody태그내에 존재하지 않는 tr td를 동적으로 생성하고 td태그사이에 json에서 가져온 데이터를 json key를 통해서 value찾아 배치(append)하였습니다.
실제로 동작 하게되면 아래와 같은 결과화면을 확인할 수 있었습니다~
'포로그래밍 > jQuery' 카테고리의 다른 글
| [javascript]타이머(timer)함수의 의미와 활용 (0) | 2020.12.11 |
|---|---|
| [jQuery] 이벤트 사용시 $(this)의미와 활용 (0) | 2020.12.08 |
| [Jquery] Each()함수를 사용한 li값 가져오기 (0) | 2020.12.03 |
| [Javascript] 배열(Array)선언, 추가, 삭제, 관리방법 (0) | 2020.11.29 |
| [jQuery]CSS, 스타일 적용하기(width, height, display등등) (0) | 2019.07.10 |