<!DOCTYPE html>
<html>
<head>
<style type="text/css">
td{
border:red double 1px;
height:30px;
width:80px;
text-align:center;
}
</style>
<script>
window.onload=function(){
var arr=[{id:"goo",pw:"1111",addr:"jinju",tel:"757"},
{id:"hong",pw:"2222",addr:"busan",tel:"755"},
{id:"gang",pw:"3333",addr:"paju",tel:"752"}];
var keys = Object.keys(arr[0]);
var keys1 = Object.keys(arr);
for(var w=0;w<1;w++){
var trTag=document.createElement("tr");
tbTag.appendChild(trTag);
var tdT=document.createElement("td");
tdT.style.width="30px";
tdT.innerHTML="del";
trTag.appendChild(tdT);
for ( var i in keys) {
var tdTag=document.createElement("td");
tdTag.innerHTML=[keys[i]];
trTag.appendChild(tdTag);
}
}
for(var k in keys1){
var trTag=document.createElement("tr");
var ipTag=document.createElement("input");
ipTag.type="checkbox";
tbTag.appendChild(trTag);
var tdT=document.createElement("td");
tdT.style.width="30px";
trTag.appendChild(tdT);
tdT.appendChild(ipTag);
for ( var i in keys) {
var tdTag=document.createElement("td");
tdTag.innerHTML=arr[k][keys[i]];
trTag.appendChild(tdTag);
}
}
add_btn.onclick=function(){
var trTag=document.createElement("tr");
var ipTag=document.createElement("input");
ipTag.type="checkbox";
tbTag.appendChild(trTag);
for(w=0;w<1;w++){
var tdT=document.createElement("td");
tdT.style.width="30px";
trTag.appendChild(tdT);
tdT.appendChild(ipTag);
for ( var i in keys) {
var tdTag=document.createElement("td");
tdTag.innerHTML="";
trTag.appendChild(tdTag);
tdTag.ondblclick=function(){
var ipTag=document.createElement("input");
ipTag.style.width="55px";
var aa=this;
ipTag.value=aa.innerHTML;
aa.innerHTML="";
this.appendChild(ipTag);
ipTag.focus();
ipTag.onblur=bb;
function bb(){
aa.innerHTML=ipTag.value;
aa.removeChild(ipTag);
}
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="추가" id="add_btn">
<input type="button" value="업데이트" id="upd_btn">
<table id="tbTag">
</table>
</body>
</html>
'개발하자 > 자바스크립트' 카테고리의 다른 글
| createElement로 순서 있는 리스트 만들어서 div에 넣기 (0) | 2015.02.28 |
|---|---|
| onchange 첫번째 옵션값 선택시 인식안하는것 해결 (0) | 2015.02.27 |
| 1단계>배열에 키와 값을 넣고 createElement 로 태그생성후 값넣기 (0) | 2015.02.26 |
| 키값 목록 뽑아오기 (0) | 2015.02.26 |
| 칸추가와 칸삭제 (0) | 2015.02.26 |