[Javascript] 간단한 주소록 만들기 - 2 0

이전 글에서는 주소록의 정보를 화면에 표시하는 방법을 배워보았다
이번 글에서는 주소록에 새로운 정보를 입력하는 방법을 배워보자

주소록의 정보는 아래와 같다



var phoneBook = {
'name' : '이름',
'age' : '나이',
'job' : '직업',
'phone' : '전화번호'
};


진행 순서는 아래와 같다
  1. html 페이지에서 생성버튼을 하나 만든다
  2. html table 태그 내에 th 태그를 하나 추가한다
  3. 생성버튼을 클릭하면 table 태그 아래에 tr 태그르 하나 생성한다.
  4. 생성한 tr 태그에 input text 를 4개와 button 1개를 생성한다.
  5. text 의 id 는 name, age, job, phone 로 생성한다
  6. button 을 클릭할 경우 해당 tr의 text에 입력한 정보를 가져온다.
  7. 입력한 정보를 phoneBook 에 맞도록 Object를 생성한다.
  8. 생성한 Object를 주소록 배열에 추가한다.


HTML

  1.         <button type="button" name="button" id="create">생성</button>
  2.         <div class="result">
  3.             <table>
  4.                 <thead>
  5.                     <tr>
  6.                         <th>번호</th>
  7.                         <th>이름</th>
  8.                         <th>나이</th>
  9.                         <th>직업</th>
  10.                         <th>전화번호</th>
  11.                         <th>수정</th>
  12.                         <th>삭제</th>
  13.                     </tr>
  14.                 </thead>
  15.                 <tbody id="content">
  16.                 </tbody>
  17.             </table>
  18.         </div>


Javascript
  1. document.getElementById('create').addEventListener("click", function () {
  2.     // 기존 html 을 읽어옴
  3.     var orgHtml = document.getElementById('content').innerHTML;
  4.     var prependHtml = '    <tr>'
  5.                     + '        <td>-</td>'
  6.                     + '        <td><input type="text" id="name" value=""></td>'
  7.                     + '        <td><input type="text" id="age" value=""></td>'
  8.                     + '        <td><input type="text" id="job" value=""></td>'
  9.                     + '        <td><input type="text" id="phone" value=""></td>'
  10.                     + '        <td><button type="button" name="button" id="confirm" onclick="addPhoneBook();">확인</button></td>'
  11.                     + '    </tr>';
  12.     document.getElementById('content').innerHTML = prependHtml+orgHtml;
  13. });

이제 생성할 수 있는 버튼까지 생성되었다.
input text에 값을 입력한 후 확인버튼을 클릭할 수 있도록 하자.
상단 코드를 보면 확인 버튼에 onclick 이벤트를 명시해놨다.
따라서 아래의 코드가 실행될 것이다.
  1. var addPhoneBook =  function () {
  2.     // input text 값을 가지고 Object 생성
  3.     var object = {
  4.         'name' : document.getElementById('name').value,
  5.         'age' : document.getElementById('age').value,
  6.         'job' : document.getElementById('job').value,
  7.         'phone' : document.getElementById('phone').value
  8.     }
  9.     arr.push(object);
  10.     var html = '';
  11.     for (var i = 0; i < arr.length; i++) {
  12.         html += "    <tr>"
  13.               + "        <td>" + Number(i+1) + "</td>"
  14.               + "        <td>" + arr[i].name + "</td>"
  15.               + "        <td>" + arr[i].age + "</td>"
  16.               + "        <td>" + arr[i].job + "</td>"
  17.               + "        <td>" + arr[i].phone + "</td>"
  18.               + "        <td>"
  19.               + "            <button type='button' name='button'>수정</button>"
  20.               + "            <button type='button' name='button'>확인</button></td>"
  21.               + "        </td>"
  22.               + "        <td><button type='button' name='button'>삭제</button></td>"
  23.               + "    </tr>";
  24.     }
  25.     document.getElementById("content").innerHTML = html;
  26. };

덧글

댓글 입력 영역