JSON -> Javascript Standard Object Notation, 자바스크립트 표준 객체 생성 표기법
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSONARRAY</title>
<style type="text/css">
#list {
border: 1px solid #ccc;
border-spacing: 0px;
margin : 10px 20px;
}
#list tr:nth-child(1) {
background: #ddd;
}
#list td, #list th {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
padding: 10px;
}
#list td:nth-child(3), #list th:nth-child(3) {
border-right: none;
}
#list tr:nth-child(4) td {
border-bottom: none;
}
</style>
<script type="text/javascript">
var obj1 = {
id : 'id0',
level : '100',
name : 'jun'
};
var obj2 = {
id : 'id1',
level : '101',
name : 'hyeong'
};
var obj3 = {
id : 'id2',
level : '102',
name : 'kim'
};
//Json객체를 만들어서 배열에 저장
var info = [ obj1, obj2, obj3 ];
var list = "<tr><th>ID</th><th>LEVEL</th><th>NAME</th></tr>";
// 배열에 저장된 객체주소를 통해서 값을 화면에 출력
function showLobby() {
for (var i = 0; i < info.length; i++) {
list = list + "<tr><td>" + info[i].id + "</td><td>" + info[i].level
+ "</td><td>" + info[i].name + "</td></tr>"
}
document.querySelector("#list").innerHTML = list;
}
</script>
</head>
<body>
<Button type="button" onClick='showLobby()'>대기실보기</Button>
<table id="list">
</table>
</body>
</html>
'JAVASCRIPT > Basic' 카테고리의 다른 글
| 웹 소켓 사용하기(Json 이용) (0) | 2016.04.04 |
|---|
