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

이전 포스팅에서는 
주소록에 담겨진 정보를 for문을 이용한 출력과
새로운 데이터를 읽어와 array에 push를 하는 것까지 진행하였다.

이번에는 수정과 삭제를 진행할 예정이다.
수정과 삭제의 포인트는 event가 일어난 해당 행이 array에서 몇번째 데이터인지 알아야한다는 것이다.

이전 새로운 데이터를 array에 push하는 포스팅에서는
for문 안에서 버튼을 세개 생성해주었다.
  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. };
수정, 확인, 삭제인데
수정은 클릭을 할 경우 해당 tr내부에 있는 이름, 나이, 직업, 전화번호를 input text로 변경할 것이고
확인은 해당 input text의 값들을 읽어와 array에 있는 데이터를 변경할 것이다.

수정버튼을 클릭하면 array에서 몇번째 데이터인지 어떻게 확인할 수 있을까?
  1.     for (var i = 0; i < arr.length; i++) {
  2.         html += "    <tr>"
  3.               + "        <td>" + Number(i+1) + "</td>"
html 테이블 내부에 번호라는 정보를 이미 출력해주었다
array에서 몇번째 데이터인지 확인을 했으니 이제 클릭을 하면 기능들을 작동하게 하면 되겠다.
수정 같은 경우는 그냥 input으로 변경하는 것이기 때문에 별도로 예시를 들지 않겠다.
  1.               + "            <button type='button' name='button'>확인</button></td>"
  2.               + "            <button type='button' name='button' onclick='update("+i+")'>확인</button></td>"
버튼 태그 내에 온클릭 이벤트를 명시해주고

  1. var update=  function (index) {
  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[index] = 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. };
정보를 수정한다고 해서 거창하다거나 어렵게 생각할 필요가 없다
  1.     arr[index] = object;
이것이 수정이고

  1.     arr.splice(index,1);
이것이 삭제이다

삭제의 경우도 onclick을 명시해주고 함수를 구현하기만 하면 된다.

  1.     var html = '';
  2.     for (var i = 0; i < arr.length; i++) {
  3.         html += "    <tr>"
  4.               + "        <td>" + Number(i+1) + "</td>"
  5.               + "        <td>" + arr[i].name + "</td>"
  6.               + "        <td>" + arr[i].age + "</td>"
  7.               + "        <td>" + arr[i].job + "</td>"
  8.               + "        <td>" + arr[i].phone + "</td>"
  9.               + "        <td>"
  10.               + "            <button type='button' name='button'>수정</button>"
  11.               + "            <button type='button' name='button'>확인</button></td>"
  12.               + "        </td>"
  13.               + "        <td><button type='button' name='button'>삭제</button></td>"
  14.               + "    </tr>";
  15.     }
  16.     document.getElementById("content").innerHTML = html;
정보를 추가, 수정, 삭제 후 for문이 반복되는 것을 볼 수 있다.

다음 포스팅에서는 반복되는 문장을 줄이도록 처리를 하자

덧글

댓글 입력 영역