본문 바로가기
Java/Source_book

2010.07.21 Ajax DOM 을 이용한 동적으로 Table 생성 및 JSON

DionysosJH™ 2010. 7. 21. 19:54

[ 2010.07.21 Ajax DOM 을 이용한 동적으로 Table 생성하기 ]

 

Create_table.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>2010.07.21</title>

</head>

<script>

var cnt=0;

 

function getData(){

 

removeTbody();//기존 Tbody영역 초기화 함수

 

var tbody=document.getElementById("memberTbody");

//<tr> 객체 생성

var tr=document.createElement("tr");

//<td> 객체 생성

var td1=document.createElement("td");

var td2=document.createElement("td");

var td3=document.createElement("td");

//<td>에 Text 입력

td1.innerHTML="id_abc";

td2.innerHTML="홍길동 : "+ (cnt++);

td3.innerHTML="30";

//<td>를 <tr>에 추가 하기

tr.appendChild(td1);

tr.appendChild(td2);

tr.appendChild(td3);

//<tr>를 <tbody>에 추가하기

tbody.appendChild(tr);

}

 

function removeTbody(){

var tbody=document.getElementById("memberTbody");

while(tbody.firstChild){

tbody.removeChild(tbody.firstChild);

}

}

</script>

<body>

 

<p>동적(Dynamic) 테이블 생성</p>

<table border="1">

 

<thead>

<tr>

<td>ID</td><td>Name</td><td>AGE</td>

</tr>

</thead>

 

<tbody id="memberTbody"></tbody>

 

<tfoot>

<tr>

<td colspan="3">

<input type="button" value="테이블 생성" onClick="getData()"/>

</td>

</tr>

</tfoot>

 

</table>

 

</body>

</html>

 

 

[ Json 사용하기 ]

Json API를 사용하기 위해서는 아래 사이트에서 API를 다운 받는다.

http://www.json.org/ è http://code.google.com/p/json-simple/ è http://json-simple.googlecode.com/files/json_simple-1.1-all.zip

 

[실습 1]

Java Proejct名 :jsonSimpleTest

다운받은 압축파일에서 lib\ json_simple-1.1.jar 파일을 라이브러리에 등록한다.

JSONObjectTest.java 생성

JSONObjectTest.java

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>2010.07.21 Json Ex</title>

<script>

function jsonTest(){ //Json1 Button의 함수

//json객체 생성

var jsonData={"id":"id_aaa","name":"홍길동","age":30};

 

//json객체 값 조회

var id=jsonData.id;

var name=jsonData.name;

var age=jsonData.age;

 

alert(id + "," + name + "," + age);

}

 

function jsonArray(){ // json_array Button의 함수

var jsonData={names:["김태희","김남길","고현정"]};

 

var sel=document.createElement("select");

//Loop를 통한 값 저장

for(i=0; i<jsonData.names.length;i++){

sel[i]=new Option(jsonData.names[i]);

}

 

//div 객체 얻어오기

var div=document.getElementById("select_div");

//div에 select 붙이기

div.appendChild(sel);

}

 

function jsonTable(){ // json_table Button의 함수

 

removeTbody()

 

var jsonData=

{members:

[

{id:"id_A",name:"id_nameA",age:15},

{id:"id_B",name:"id_nameB",age:25},

{id:"id_C",name:"id_nameC",age:35},

{id:"id_D",name:"id_nameD",age:45}

]

};

 

//Table에 json의 값 넣기

var tbody=document.getElementById("tbody");

for (i=0; i<jsonData.members.length; i++){

var tr=document.createElement("tr");

var td1=document.createElement("td");

var td2=document.createElement("td");

var td3=document.createElement("td");

 

//td에 text넣기 - text는 json에 있음

td1.innerHTML=jsonData.members[i].id;

td2.innerHTML=jsonData.members[i].name;

td3.innerHTML=jsonData.members[i].age;

 

//td를 tr에 tr을 tbody에 붙이기

tr.appendChild(td1);

tr.appendChild(td2);

tr.appendChild(td3);

tbody.appendChild(tr);

}

}

 

function removeTbody(){ //tbody 요소 초기화 함수

var tbody=document.getElementById("tbody");

while(tbody.firstChild){

tbody.removeChild(tbody.firstChild);

}

}

</script>

</head>

<body>

<div id="select_div"></div>

 

<table border="2">

<thead>

<tr>

<td>ID</td><td>Name</td><td>Age</td>

</tr>

</thead>

<tbody id="tbody"></tbody>

</table>

<br/>

<input type="button" value="json1" onClick="jsonTest()"/><br/>

<input type="button" value="json_array" onClick="jsonArray()"/><br/>

<input type="button" value="json_table" onClick="jsonTable()"/><br/>

</body>

</html>

 

vo.MemberVO.java 생성

MemberVO

package vo;

 

public class MemberVO {

private String id;

private String name;

private int age;

 

public MemberVO() {

super();

}

 

public MemberVO(String id, String name, int age) {

super();

this.id = id;

this.name = name;

this.age = age;

}

 

public String getId() {

return id;

}

public void setId(String id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public int getAge() {

return age;

}

public void setAge(int age) {

this.age = age;

}

 

}

 

JSONArrayTest생성

JSONArrayTest

import java.util.HashSet;

 

import org.json.simple.JSONArray;

import org.json.simple.JSONObject;

 

 

public class JSONArrayTest {

public static void main(String[] args) {

/*JSONArray를 이용해 JSON의 array Value를 생성

*JSONArray는 ArrayList의 구현체

*/

JSONArray jArr=new JSONArray();

jArr.add("김태희");

jArr.add("장동건");

jArr.add("고현정");

jArr.add("송혜교");

 

String str1=jArr.toJSONString();

String str2=jArr.toString();

 

System.out.println("str1 : "+ str1 +" = "+ " Str2 : " + str2);

//str1 : ["김태희","장동건","고현정","송혜교"] = Str2 : ["김태희","장동건","고현정","송혜교"]

 

 

//JSONArray에 Collection 넣기

jArr.clear();

HashSet set=new HashSet();

 

set.add("1호선");

set.add("2호선");

set.add("3호선");

set.add(4);//Integer

 

jArr.addAll(set);

System.out.println(jArr.toJSONString());

 

jArr.clear();

String [] arr={"SamSung", "LG", "DaeWoo", "Lotte"};

for(String str:arr){

jArr.add(str);

}

 

JSONObject jobj=new JSONObject();

jobj.put("제조사", jArr);

System.out.println(jobj);

//{"제조사":["SamSung","LG","DaeWoo","Lotte"]}

}

}

 

JSONAllMember.java 생성

JSONAllMember

import java.util.ArrayList;

 

import org.json.simple.JSONArray;

import org.json.simple.JSONObject;

 

import vo.MemberVO;

 

 

public class JSONAllMember {

public static void main(String[] args) {

MemberVO mvo1 = new MemberVO("id_1", "강지영", 17);

MemberVO mvo2 = new MemberVO("id_2", "이민정", 29);

MemberVO mvo3 = new MemberVO("id_3", "송치엔", 24);

MemberVO mvo4 = new MemberVO("id_4", "구하라", 20);

 

ArrayList list = new ArrayList();

list.add(mvo1);

list.add(mvo2);

list.add(mvo3);

list.add(mvo4);

//가정 : ArrayList list = bService.getAllMember();

//list를 JSON 형태의 문자열로 만들어서 출력

JSONObject jobj1 = new JSONObject();

 

JSONArray jarr = new JSONArray();

 

for(Object obj : list){

JSONObject jobj2 = new JSONObject();

MemberVO mvo = (MemberVO)obj;

jobj2.put("id", mvo.getId());

jobj2.put("name", mvo.getName());

jobj2.put("age", mvo.getAge());

jarr.add(jobj2);

}

jobj1.put("members", jarr);

System.out.println(jobj1);

// {"members":[{"id":"id_1","age":17,"name":"강지영"},{"id":"id_2","age":29,"name":"이민정"},{"id":"id_3","age":24,"name":"송치엔"},{"id":"id_4","age":20,"name":"구하라"}]}

}

}

'Java > Source_book' 카테고리의 다른 글

[javascript] 초간단 객체지향 JavaScript  (0) 2013.05.13
2010.07.23 DWR(Direct Web Remoting)  (0) 2010.07.26
2010.07.25 AJAX 최종 실습 예제  (0) 2010.07.26
[ 2010.07.19 - 20 AJAX 실습 및 정리 ] – Word 버전  (0) 2010.07.20
[2010.07.19 ~20]JavaScript & Ajax - Image 버전  (0) 2010.07.20
2010.07.19 AJAX  (0) 2010.07.19

'Java/Source_book' Related Articles

티스토리툴바