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




+ Recent posts