본문 바로가기
매일코딩/자바스크립트예제

[초미니프로젝트] 자바스크립트 연락처 저장하기 구현 [2]

by 인생여희 2017. 5. 23.
반응형


하...일단 저장하기 성공....완전빡샘..

추가하기 누르면 위의 사진처럼 빈 행이 생긴다.

빈행의 칸을 클릭하면 활성화 되고 값입력 가능하다

값입력후 저장하기 누르면 객체 형태로 배열에 저장된다.

하...ㅜㅜ 자바스크립트 dom 개념인데..이렇게 헤메다니..

분발하자!!!!!!!!!!!!!!!


<!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>


var users= [{

번호:1,

이름:'김수동',

나이:23,

연락처:'010-1234-1234',

주소:'서울시 종로구 인사동길123',

직업:'학생',

취미:'기타'

},

{

번호:2,

이름:'남진이',

나이:24,

연락처:'010-5243-4321',

주소:'경남 창원시 김로동 234',

직업:'주부',

취미:'노래'

}];

var user = new Object();


var keys = ['번호','이름','나이','연락처','주소','직업','취미']




function list(){

// tr 리스트 생성 부분

for(var i = 0; i<users.length;i++){

var tbl = document.getElementById('tbl');

var trel = document.createElement('tr');

//console.log(tbl);

//console.log(trel);

tbl.appendChild(trel);

for (key in users[i]){

var tr = document.getElementsByTagName('tr')[i+1];

var td = document.createElement('td');

var tdText = document.createTextNode(users[i][key]);

td.appendChild(tdText);

tr.appendChild(td);

}


}


}





//저장하기

function saveFunction(){


var newrow =users.length-1;

//새로 추가된 user  객체 위치

var userinsertobj=users[newrow];

//테이블 요소 구하기

var tbl = document.getElementById('tbl');

//테이블 요소의 제일 마지막 <tr> 구하기 즉, 추가한 행 구하기

var tbllastchild=tbl.lastChild

//추가한 빈 객체 확인

alert("전체 user 길이? "+users.length);

alert("새로 추가된 열은 몇번? "+newrow);

alert(typeof userinsertobj);

//테이블 요소의 제일 마지막 <tr> 들의 class 이름이 newrow 인 요소들 구하기, 총 7개

var newdatas = tbllastchild.getElementsByClassName('newrow'); 

for(num in newdatas){     //7번 돈다

var inputdata = newdatas[num].value; //입력한 데이터 값

var key = keys[num];   // user key 값 '번호', '이름' ...등

userinsertobj[key]=inputdata; // 값을 user 객체인 userinsertobj에 대입

}

//추가한 객체  확인

console.log(userinsertobj);

// 배열안에 담겨있는 전체 객체 출력해보기

console.log(JSON.stringify(users));

}



 function onblur_event(e){

 

//var target = e.target;

//alert(target.innerHTML);

        }


// 추가

function insertFunction(){


var tbl = document.getElementById('tbl');

var trel = document.createElement('tr');


for(var i = 0; i<7;i++){

var x = document.createElement("INPUT");

x.setAttribute("type", "text");

x.setAttribute("class", "newrow");

x.addEventListener("blur",onblur_event, false);

var tdel = document.createElement('td');

tdel.appendChild(x);

trel.appendChild(tdel);

}

tbl.appendChild(trel);

users.push(user);

}


</script>


    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>


   </body>

</html>


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
<!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>
    <br>
    <br>
    <br>
    <br>
    <br>
    <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>
 
var users= [{
        
        번호:1,
        이름:'김수동',
        나이:23,
        연락처:'010-1234-1234',
        주소:'서울시 종로구 인사동길123',
        직업:'학생',
        취미:'기타'
    },
    {
        번호:2,
        이름:'남진이',
        나이:24,
        연락처:'010-5243-4321',
        주소:'경남 창원시 김로동 234',
        직업:'주부',
        취미:'노래'
    }];
var user = new Object();
 
var keys = ['번호','이름','나이','연락처','주소','직업','취미']
 
 
 
function list(){
// tr 리스트 생성 부분
for(var i = 0; i<users.length;i++){
        var tbl = document.getElementById('tbl');
            var trel =    document.createElement('tr');
            
            //console.log(tbl);
            //console.log(trel);
            
            tbl.appendChild(trel);
                    
                    for (key in users[i]){
                            
                            var tr = document.getElementsByTagName('tr')[i+1];
                            var td = document.createElement('td');
                            var tdText    = document.createTextNode(users[i][key]);
                                        
                            td.appendChild(tdText);
                            tr.appendChild(td);
                            
                    }
 
}
 
}
 
 
 
 
//저장하기
function saveFunction(){
 
    var newrow =users.length-1;
    
    //새로 추가된 user  객체 위치
    var userinsertobj=users[newrow];
    
    //테이블 요소 구하기
    var tbl = document.getElementById('tbl');    
    
    //테이블 요소의 제일 마지막 <tr> 구하기 즉, 추가한 행 구하기
    var tbllastchild=tbl.lastChild                            
    
    
    //추가한 빈 객체 확인
    alert("전체 user 길이? "+users.length);
    alert("새로 추가된 열은 몇번? "+newrow);
    alert(typeof userinsertobj);
    
    //테이블 요소의 제일 마지막 <tr> 들의 class 이름이 newrow 인 요소들 구하기, 총 7개
    var newdatas = tbllastchild.getElementsByClassName('newrow'); 
            
            for(num in newdatas){                            //7번 돈다
    
                    var inputdata = newdatas[num].value; //입력한 데이터 값
                    
                    var key = keys[num];              // user key 값 '번호', '이름' ...등
                    
                    userinsertobj[key]=inputdata;    // 값을 user 객체인 userinsertobj에 대입
                
                    }
                    
                    //추가한 객체  확인
                    console.log(userinsertobj);
                    
                    // 배열안에 담겨있는 전체 객체 출력해보기
                    console.log(JSON.stringify(users));
            }
                
        
 
 
 function onblur_event(e){
 
        //var target = e.target;
    
        //alert(target.innerHTML);
    
        }
 
// 추가
function insertFunction(){
 
        var tbl = document.getElementById('tbl');
        var trel =    document.createElement('tr');
 
            
            for(var i = 0; i<7;i++){
                var x = document.createElement("INPUT");
                x.setAttribute("type", "text");
                x.setAttribute("class", "newrow");
                x.addEventListener("blur",onblur_event, false);
                
                var tdel = document.createElement('td');
                tdel.appendChild(x);
                trel.appendChild(tdel);
            }
            
            tbl.appendChild(trel);
    users.push(user);            
}
 
</script>
    
    
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
 
    
 
   </body>
</html>
 
cs


반응형
저작자표시

'매일코딩 > 자바스크립트예제' 카테고리의 다른 글

자바스크립트 객체 예제  (1) 2018.10.15
[초미니프로젝트] 자바스크립트 연락처 저장하기 오류발생! 해결! [3]  (0) 2017.05.24
[초미니프로젝트] 자바스크립트 연락처 구현 준비 [1]  (0) 2017.05.22
12.자바스크립트 기초 문법 (FORM)  (4) 2016.12.29
11.자바스크립트 기초 문법 (window)  (4) 2016.12.29

관련글

댓글

티스토리툴바