json을 이용한 테이블 관리
<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function getMember(){
var jObj = {id:"abc", age:22, name:"이순신"};
document.getElementById("id").value=jObj.id;
document.getElementById("name").value=jObj.name;
document.getElementById("age").value=jObj.age;
}
function getIds1(){
var jobj = {"ids":["aaaa","bbbb","cccc","dddd","eeee"]};
var sel = document.getElementById("ids");
for(i=0;i<jobj.ids.length;i++){
alert(jobj.ids[i]);
sel.options[i+1] = new Option(jobj.ids[i]);
}
}
function getIds2(){
var jobj = ["1111","2222","3333","4444","5555"];
var sel = document.getElementById("ids");
for(i=0;i<jobj.length;i++){
alert(jobj[i]);
sel.options[i+1] = new Option(jobj[i]);
}
}
function getAllMembers(){
var jobj = {
members:[
{id:"aaa",name:"이순신",address:"서울"},
{id:"bbb",name:"홍길동",address:"인천"},
{id:"ccc",name:"유재석",address:"대구"},
{id:"ddd",name:"김태희",address:"광주"},
{id:"eee",name:"정현돈",address:"제주"}
]
};
var tbody = document.getElementById("memberTbody");
var childCnt = tbody.childNodes.length;
for(i=0;i<childCnt;i++){
tbody.removeChild(tbody.firstChild);
}
//추가
for(i=0;i<jobj.members.length;i++){
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var id = document.createTextNode(jobj.members[i].id);
var name = document.createTextNode(jobj.members[i].name);
var addr = document.createTextNode(jobj.members[i].address);
td1.appendChild(id);
td2.appendChild(name);
td3.appendChild(addr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tbody.appendChild(tr);
}
}
</script>
</head>
<body>
ID : <input type="text" name="id" id="id"><br>
이름 : <input type="text" name="name" id="name"><br>
나이 : <input type="text" name="age" id="age"><br>
<input type="button" value="회원정보조회" onclick="getMember()"><br>
<select name="ids" id="ids">
<option value="default">아이디 선택하세요</option>
</select><br>
<input type="button" value="ID 조회1" onclick="getIds1()">
<input type="button" value="ID 조회2" onclick="getIds2()"><br><br>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody id="memberTbody"></tbody>
<tfoot>
<tr>
<td colspan="3">
<input type="button" value="회원조회" onclick="getAllMembers()">
</td>
</tr>
</tfoot>
</table>
</body>
</html>
* 결과
* DOM객체 사용하는 걸로 바꾸기 (exploer에서는 tbody가 안먹는다. 크롬이나 다른 브라우저에서는 가능)
<!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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function getMember(){
var jObj = {id:"abc", age:22, name:"이순신"};
document.getElementById("id").value=jObj.id;
document.getElementById("name").value=jObj.name;
document.getElementById("age").value=jObj.age;
}
function getIds1(){
var jobj = {"ids":["aaaa","bbbb","cccc","dddd","eeee"]};
var sel = document.getElementById("ids");
for(i=0;i<jobj.ids.length;i++){
//alert(jobj.ids[i]);
sel.options[i+1] = new Option(jobj.ids[i]);
}
}
function getIds2(){
var jobj = ["1111","2222","3333","4444","5555"];
var sel = document.getElementById("ids");
for(i=0;i<jobj.length;i++){
//alert(jobj[i]);
sel.options[i+1] = new Option(jobj[i]);
}
}
function getAllMembers(){
var jobj = {
members:[
{id:"aaa",name:"이순신",address:"서울"},
{id:"bbb",name:"홍길동",address:"인천"},
{id:"ccc",name:"유재석",address:"대구"},
{id:"ddd",name:"김태희",address:"광주"},
{id:"eee",name:"정현돈",address:"제주"}
]
};
var tbody = document.getElementById("memberTbody");
var childCnt = tbody.childNodes.length;
for(i=0;i<childCnt;i++){
tbody.removeChild(tbody.firstChild);
}
//추가
for(i=0;i<jobj.members.length;i++){
//tr생성
var tr = document.createElement("tr");
//tr생성
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
//content생성
var id = document.createTextNode(jobj.members[i].id);
var name = document.createTextNode(jobj.members[i].name);
var addr = document.createTextNode(jobj.members[i].address);
//td <- content
td1.appendChild(id);
td2.appendChild(name);
td3.appendChild(addr);
//tr <- td
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
//tbody <- tr
tbody.appendChild(tr);
}
}
function getAllMembers2(){
var jobj = {
members:[
{id:"aaa",name:"이순신",address:"서울"},
{id:"bbb",name:"홍길동",address:"인천"},
{id:"ccc",name:"유재석",address:"대구"},
{id:"ddd",name:"김태희",address:"광주"},
{id:"eee",name:"정현돈",address:"제주"}
]
};
var txt = "";
for(i=0;i<jobj.members.length;i++){
txt = txt+"<tr>";
txt = txt+"<td>"+jobj.members[i].id+"</td>";
txt = txt+"<td>"+jobj.members[i].name+"</td>";
txt = txt+"<td>"+jobj.members[i].address+"</td>";
txt = txt+"</tr>";
}
alert(txt);
document.getElementById("memberTbody").innerHTML = txt;
}
</script>
</head>
<body>
ID : <input type="text" name="id" id="id"><br>
이름 : <input type="text" name="name" id="name"><br>
나이 : <input type="text" name="age" id="age"><br>
<input type="button" value="회원정보조회" onclick="getMember()"><br>
<select name="ids" id="ids">
<option value="default">아이디 선택하세요</option>
</select><br>
<input type="button" value="ID 조회1" onclick="getIds1()">
<input type="button" value="ID 조회2" onclick="getIds2()"><br><br>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody id="memberTbody"></tbody>
<tfoot>
<tr>
<td colspan="3">
<input type="button" value="회원조회" onclick="getAllMembers()">
<input type="button" value="회원조회-innerHTML" onclick="getAllMembers2()">
</td>
</tr>
</tfoot>
</table>
</body>
</html>
* 결과
