<!DOCTYPE html>
<html>
<head>
<title>연락처</title>
</head>
<body onload="list()">
<h3 align="center">연락처 목록</h3>
<table id="tbl" border="1" align="center">
<tr id="trid">
<th>번호</th>
<th>이름</th>
<th>나이</th>
<th>연락처</th>
<th>주소</th>
<th>직업</th>
<th>취미</th>
</tr>
</table>
<hr>
<div align="center">
<input type="button" onclick="insertFunction()" id="insert" name="insert" value="추가하기" />
<input type="button" onclick="saveFunction()" id="save" name="save" value="저장하기"/>
<input type="button" id="del" name="del" value="삭제하기"/>
<input type="button" id="serch" name="serch" value="찾아보기"/>
</div>
<script>
// user 객체가 들어갈 배열
var users= [];
//user 정보가 들어갈 빈객체
var user = {};
var keys = ['번호','이름','나이','연락처','주소','직업','취미'];
function list(){
// tr 리스트 생성 부분 (배열의 개수만큼 테이블 행 생성)
for(var i = 0; i<users.length;i++){
//테이블 요소를 선택한다
var tbl = document.getElementById('tbl');
// 새로운 행을 생성한다
var trel = document.createElement('tr');
// 테이블 요소에 새로운 행을 붙인다
tbl.appendChild(trel);
//테이블 칸과 text값 생성
for (key in users[i]){
//첫줄은 이름,나이와 같은 항목이기때문에 + 1 해줌
var tr = document.getElementsByTagName('tr')[i+1];
//칸을 만든다.
var td = document.createElement('td');
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
//칸에 넣을 내용물을 가져온다.
var tdText = document.createTextNode(users[i][key]);
x.value=users[i][key];
//내용물을 칸에 붙인다.
td.appendChild(x);
//칸을 행에 붙인다.
tr.appendChild(td);
}
}
}
//저장하기
function saveFunction(){
//배열에 있는 객체 값 확인
alert(JSON.stringify(users));
//테이블 요소 구하기
var tbl = document.getElementById('tbl');
//테이블 요소의 제일 마지막 <tr> 구하기 즉, 추가한 행 구하기
var trlangth=tbl.getElementsByTagName('tr').length;
alert("값있는 행은 총몇줄?="+(trlangth-1));
alert("users 객체 개수는?="+users.length);
for(var i = 0; i<trlangth-1;i++){
//값이 있는 첫번째 행의 tr 요소를 가져 온다.
var selecttrs = tbl.getElementsByTagName('tr')[i+1];
//위의 요소에 속한 td 값들을 가져온다.
var selecttds = selecttrs.getElementsByTagName('td');
//칸이 총 7칸
for(var a = 0 ; a<7;a++){
//alert(selecttds[a].firstChild.value);
var key = keys[a]; //값 '번호', '이름' ...등 칼럼 이름
alert("users["+i+"]:vlaue="+selecttds[a].firstChild.value)
// users 객체 0 번방 '번호' = 1 이런식으로 테이블 전체의 값을 읽어 저장
users[i][key]=selecttds[a].firstChild.value;
}
}
//배열에 있는 객체 값 확인
alert(JSON.stringify(users));
}
// 추가
function insertFunction(){
user = {}; //초기화 *************************** 중요!
var tbl = document.getElementById('tbl');
var trel = document.createElement('tr');
for(var i = 0; i<7;i++){
//<input> 생성
var x = document.createElement("INPUT");
x.setAttribute("type", "text");
//<td> 생성
var tdel = document.createElement('td');
tdel.appendChild(x);
trel.appendChild(tdel);
}
//테이블에 <tr> 붙임
tbl.appendChild(trel);
//alert(users.length);
//users 배열에 빈 user 객체 추가
users.push(user);
//users.push({});
}
</script>
</body>
</html>
어제 짜놓은 코드를 보니 큰 문제가 있었다.
1. 아무것도 없는 테이블에서 '추가하기'를 누르면 빈 행과 칸이 1줄 생깁니다.
- function insertFunction() 가 실행됩니다.(dom)으로 구현 했습니다.
2. 빈칸에 값을 입력하고 저장하기를 누르면 saveFunction() 실행됩니다.
-첫번째 행의 값이 user 객체에 삽입되고 그 각체는 users 배열에 삽입됩니다.
문제는 user 객체를 초기화 하는것이었다!
user객체를 초기화 해서 넣지 않으니깐
전에 user객체에 들어 있던 값이 push 가 되는거였다.....!!!!!!!!
어쨌든 해결 ㅠ!!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 | <!DOCTYPE html> <html> <head> <title>연락처</title> </head> <body onload="list()"> <h3 align="center">연락처 목록</h3> <table id="tbl" border="1" align="center"> <tr id="trid"> <th>번호</th> <th>이름</th> <th>나이</th> <th>연락처</th> <th>주소</th> <th>직업</th> <th>취미</th> </tr> </table> <hr> <div align="center"> <input type="button" onclick="insertFunction()" id="insert" name="insert" value="추가하기" /> <input type="button" onclick="saveFunction()" id="save" name="save" value="저장하기"/> <input type="button" id="del" name="del" value="삭제하기"/> <input type="button" id="serch" name="serch" value="찾아보기"/> </div> <script> // user 객체가 들어갈 배열 var users= []; //user 정보가 들어갈 빈객체 var user = {}; var keys = ['번호','이름','나이','연락처','주소','직업','취미']; function list(){ // tr 리스트 생성 부분 (배열의 개수만큼 테이블 행 생성) for(var i = 0; i<users.length;i++){ //테이블 요소를 선택한다 var tbl = document.getElementById('tbl'); // 새로운 행을 생성한다 var trel = document.createElement('tr'); // 테이블 요소에 새로운 행을 붙인다 tbl.appendChild(trel); //테이블 칸과 text값 생성 for (key in users[i]){ //첫줄은 이름,나이와 같은 항목이기때문에 + 1 해줌 var tr = document.getElementsByTagName('tr')[i+1]; //칸을 만든다. var td = document.createElement('td'); var x = document.createElement("INPUT"); x.setAttribute("type", "text"); //칸에 넣을 내용물을 가져온다. var tdText = document.createTextNode(users[i][key]); x.value=users[i][key]; //내용물을 칸에 붙인다. td.appendChild(x); //칸을 행에 붙인다. tr.appendChild(td); } } } //저장하기 function saveFunction(){ //배열에 있는 객체 값 확인 alert(JSON.stringify(users)); //테이블 요소 구하기 var tbl = document.getElementById('tbl'); //테이블 요소의 제일 마지막 <tr> 구하기 즉, 추가한 행 구하기 var trlangth=tbl.getElementsByTagName('tr').length; alert("값있는 행은 총몇줄?="+(trlangth-1)); alert("users 객체 개수는?="+users.length); for(var i = 0; i<trlangth-1;i++){ //값이 있는 첫번째 행의 tr 요소를 가져 온다. var selecttrs = tbl.getElementsByTagName('tr')[i+1]; //위의 요소에 속한 td 값들을 가져온다. var selecttds = selecttrs.getElementsByTagName('td'); //칸이 총 7칸 for(var a = 0 ; a<7;a++){ //alert(selecttds[a].firstChild.value); var key = keys[a]; //값 '번호', '이름' ...등 칼럼 이름 alert("users["+i+"]:vlaue="+selecttds[a].firstChild.value) // users 객체 0 번방 '번호' = 1 이런식으로 테이블 전체의 값을 읽어 저장 users[i][key]=selecttds[a].firstChild.value; } } //배열에 있는 객체 값 확인 alert(JSON.stringify(users)); } // 추가 function insertFunction(){ user = {}; //초기화 *************************** 중요! var tbl = document.getElementById('tbl'); var trel = document.createElement('tr'); for(var i = 0; i<7;i++){ //<input> 생성 var x = document.createElement("INPUT"); x.setAttribute("type", "text"); //<td> 생성 var tdel = document.createElement('td'); tdel.appendChild(x); trel.appendChild(tdel); } //테이블에 <tr> 붙임 tbl.appendChild(trel); //alert(users.length); //users 배열에 빈 user 객체 추가 users.push(user); //users.push({}); } </script> </body> </html> | cs |
'매일코딩 > 자바스크립트예제' 카테고리의 다른 글
| 자바스크립트 객체 예제 (1) | 2018.10.15 |
|---|---|
| [초미니프로젝트] 자바스크립트 연락처 저장하기 구현 [2] (0) | 2017.05.23 |
| [초미니프로젝트] 자바스크립트 연락처 구현 준비 [1] (0) | 2017.05.22 |
| 12.자바스크립트 기초 문법 (FORM) (4) | 2016.12.29 |
| 11.자바스크립트 기초 문법 (window) (4) | 2016.12.29 |
댓글