[javaScript] contenteditable 속성으로 row 수정,저장하기.

안녕하세요. 이전 포스트에 이어 오늘은 contenteditable 속성을 js로 동적 처리하여 테이블 내에서 수정,삭제할 수 있는 기능을 구현해보겠습니다. contenteditable에 대한 내용은 이전 포스트 참고바랍니다.

 

UI는 이전 포스트와 큰 차이가 없지만, 옵션란이 생겼습니다. css에 font awesome 링크를 import 하여 아이콘들을 사용해 저장,수정,삭제를 나타내보도록 하겠습니다. class를 편집하는 내용은 이 포스트 참고 바랍니다.

 

아래는 전체 코드입니다. 

 

 

c.html

<table id="editableTable">
  <thead>
    <tr class="table-light">
      <th>이름</th>
      <th>나이</th>
      <th>직업</th>
      <th>옵션</th>
    </tr>
  </thead>
  <tbody id="info">
    <tr>
      <td>김뫄뫄</td>
      <td>25</td>
      <td>학생</td>
      <td>
        <i class="fas fa-edit" onclick="modify_and_save(this)">수정</i>
        <i class="fas fa-trash-alt" onclick="remove(this)">삭제</i>
      </td>
    </tr>
    <tr>
      <td>박뫄뫄</td>
      <td>30</td>
      <td>사무직</td>
      <td>
        <i class="fas fa-edit" onclick="modify_and_save(this)">수정</i>
        <i class="fas fa-trash-alt" onclick="remove(this)">삭제</i>
      </td>
    </tr>
    <tr>
      <td contenteditable="false">이뫄뫄</td>
      <td>21</td>
      <td>학생</td>
      <td>
        <i class="fas fa-edit" onclick="modify_and_save(this)">수정</i>
        <i class="fas fa-trash-alt" onclick="remove(this)">삭제</i>
      </td>
    </tr>
  </tbody>
</table>

 

c.css

/*fontawesome 아이콘 css 삽입*/
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');

table {
  border-collapse: collapse; /* 테이블 셀 간격을 없애기 위해 사용 */
  width: 80%; /* 테이블 전체 너비 */
  margin: auto;/*가운데 정렬*/
}

th, td {
  border: 1px solid #ddd; /* 셀 테두리 */
  padding: 8px; /* 셀 안쪽 여백 */
  text-align: center; /* 텍스트 정렬 방식 */
}

th {
  background-color: #f2f2f2; /* 헤더 배경색 */
  color: #333; /* 헤더 글자색 */
  font-weight: bold;/*글씨 두껍게*/
}

 

c.js

function modify_and_save(itag) {
  //클릭한 아이콘의 가장가까운 tr요소를 찾음.
  const tr = itag.closest("tr");
  //옵션 컬럼에 있는 셀은 제외해야하므로 첫번째 두번째 세번째 셀 요소를 가져옴.
  const firstcell = tr.children[0];
  const secondcell = tr.children[1];
  const thirdcell = tr.children[2];

  //첫번째 셀의 contenteditable 속성이 true라면.(나머지 셀들의 속성 동일)
  if (firstcell.contentEditable === "true") {
    //셀들의 속성 false로 모두 변경
    firstcell.contentEditable = "false";
    secondcell.contentEditable = "false";
    thirdcell.contentEditable = "false";
    //저장 된 상태이므로 아이콘 수정으로 변경.
    itag.innerText = "수정";
    //font awesome으로 아이콘 변경.
    itag.classList.add("fa-edit");
    itag.classList.remove("fa-save");
 //첫번째 셀의 contenteditable 속성이 false라면(나머지 셀들의 속성 동일)
  } else {
  
    //각 셀들의 contenteditable 속성 true로 모두 변경하여 수정 가능하게 함
    firstcell.contentEditable = "true";
    secondcell.contentEditable = "true";
    thirdcell.contentEditable = "true";
    //저장으로 텍스트 변경.
    itag.innerText = "저장";
    //아이콘 변경
    itag.classList.remove("fa-edit");
    itag.classList.add("fa-save"); 
    //첫번째 셀에 포커스를 줘서 상태 변경에 대해 알림.
    firstcell.focus();
    
  }
}

function remove(itag) {
 //가장 가까운 tr요소 찾아서 삭제
  const tr = itag.closest("tr");
  tr.remove();
}

 

완성 시 아래와 같은 모습을 확인할 수 있습니다.

 

contenteditable을 사용하여 구현한 수정,저장. 삭제는 remove()를 사용했다.

 

-자세한 내용은 아래 참고 바랍니다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/remove

Element.remove() - Web APIs | MDN

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

contenteditable - HTML: HyperText Markup Language | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute

Element.getAttribute() - Web APIs | MDN