[Javascript] Contenteditable에 대해 알아보고 수정 가능한 테이블 만들기 JQuery Editable

안녕하세요

 

이번 시간에는 Javascript Contenteditable에 대해 알아보고 수정 가능한 테이블을 만들어보는 실습을 진행하겠습니다.

 

1. Contenteditable 이란?

JavaScript에서 contenteditable 속성을 사용하면 웹 페이지의 텍스트 내용을 사용자가 직접 편집할 수 있게 할 수 있습니다. 이를 "editable" 혹은 "in-place editing"이라고 합니다.

<div contenteditable>
    이 부분은 사용자가 직접 편집할 수 있습니다.
</div>

위 코드는 contenteditable 속성을 나타냅니다. contenteditable 속성은 일반적으로 <div>, <p>, <span> 등의 요소에 적용할 수 있습니다.

 

2. Editable의 장점 (사용하는 이유)

Editable의 장점은 다음과 같습니다.

 

1. 쉬운 사용성

사용자가 페이지를 더 쉽게 사용할 수 있습니다. 사용자가 원하는 대로 페이지를 수정하거나 추가할 수 있습니다.

 

2. 빠른 수정

웹 페이지에서 바로 내용을 수정할 수 있습니다. 별도의 페이지를 열지 않고도 빠르게 수정이 가능합니다.

 

3. 적은 코드 양

페이지를 수정하기 위한 별도의 코드를 작성할 필요가 없습니다. 간단한 속성 값 변경만으로도 수정이 가능합니다.

 

4. 동적인 UI

웹 페이지가 보다 동적인 UI를 갖게 됩니다. 사용자가 페이지의 내용을 즉시 수정할 수 있으므로 더욱 상호작용적인 UI를 구성할 수 있습니다.

 

5. 빠른 개발 속도

별도의 페이지를 따로 만들지 않고도 빠르게 개발할 수 있습니다. 수정 기능이 필요한 모든 부분에 대해 손쉽게 적용할 수 있습니다.

 

웹 페이지를 더욱 상호작용적으로 만들기 위해서는 editable을 적극 활용하는 것이 좋습니다.

 

3. Editable 적용하기

1. Contenteditable을 통한 Editable 적용하기

<div contenteditable>
    이 부분은 사용자가 직접 편집할 수 있습니다.
</div>

위에서 본 예시처럼 `contenteditable` 속성을 각각의 태그 값에 추가함으로써 Editable을 적용할 수 있습니다.

 

2. HTML로 간단히 테이블 구조 만들기

<table>
	<tr>
            <td class="editable" style="border:1px solid red;">table1</td>
            <td class="editable" style="border:1px solid red;">table2</td>
            <td class="editable" style="border:1px solid red;">table3</td>
            <td class="editable" style="border:1px solid red;">table4</td>
            <td class="editable" style="border:1px solid red;">table5</td>
	</tr>
</table>

위 코드는 HTML을 통해 table을 만드는 간단한 코드입니다.

 

위의 코드가 실행된다면 다음과 같이 화면에 보여지게 될 것입니다. 그냥 이 테이블을 누른다고 해서 아무 일도 일어나지 않습니다.

 

3. JQuery를 이용해 Editable 만들기

웹 페이지가 보다 동적인 상호작용이 가능하게 바꿔줄 수 있습니다. 사용자가 페이지의 내용을 즉시 수정할 수 있으므로 더욱 상호작용적인 UI를 구성할 수 있습니다.

$(document).ready(function() {
  // 테이블 셀 더블 클릭 이벤트 핸들러
  $(document).on("dblclick", ".editable", function() {
    // 더블 클릭한 셀의 내용을 가져옴
    var value=$(this).text();
    // 새로운 input 엘리먼트를 만들어서 테이블 셀에 추가
    var input="<input type='text' class='input-data' value='"+value+"' class='form-control'>";
    $(this).html(input);
    // 셀에서 editable 클래스를 삭제
    $(this).removeClass("editable");
  });
  // input 엘리먼트 blur 이벤트 핸들러
  $(document).on("blur", ".input-data", function() {
    // input 엘리먼트에서 수정된 값을 가져옴
    var value=$(this).val();
    // input 엘리먼트의 부모 td 엘리먼트를 찾아서 변수에 할당
    var td=$(this).parent("td");
    // input 엘리먼트를 삭제
    $(this).remove();
    // 수정된 값을 td 엘리먼트에 추가
    td.html(value);
    // td 엘리먼트에 editable 클래스 추가
    td.addClass("editable");
  });
  // input 엘리먼트 keypress 이벤트 핸들러
  $(document).on("keypress", ".input-data", function(e) {
    // 엔터키 입력 시
    var key=e.which;
    if(key==13) {
      // input 엘리먼트에서 수정된 값을 가져옴
      var value=$(this).val();
      // input 엘리먼트의 부모 td 엘리먼트를 찾아서 변수에 할당
      var td=$(this).parent("td");
      // input 엘리먼트를 삭제
      $(this).remove();
      // 수정된 값을 td 엘리먼트에 추가
      td.html(value);
      // td 엘리먼트에 editable 클래스 추가
      td.addClass("editable");
    }
  });
});

(1) $(document).on("dblclick", ".editable", function() {...})

editable 클래스가 지정된 요소를 더블 클릭하면 실행되는 함수입니다. 더블 클릭한 셀의 값을 가져와서, 입력 필드를 생성하여 삽입하고, 해당 셀에서 "editable" 클래스를 제거하여 다른 이벤트가 발생하지 않도록 합니다.

 

(2) $(document).on("blur", ".input-data", function() {...})

입력 필드를 생성한 후, 포커스를 잃을 때 실행되는 함수입니다. 입력 필드의 값을 가져와서 셀에 삽입하고, 입력 필드를 삭제하고 해당 셀에 "editable" 클래스를 추가하여 다시 수정할 수 있도록 합니다.

 

(3) $(document).on("keypress", ".input-data", function(e) {...})

입력 필드에서 키를 누를 때 실행되는 함수입니다. 엔터 키가 입력되면 2번과 같이 수정된 값을 저장하고, 입력 필드를 삭제하고 해당 셀에 "editable" 클래스를 추가하여 다시 수정할 수 있도록 합니다.

 

4. 동작 확인하기

서버에서 위 코드를 실행하면 다음과 같이 테이블의 값을 수정할 수 있는 `Editable` 형태로 출력됩니다. 

 

위의 사진처럼 수정할 수 있는 테이블을 만들 수 있습니다. 하지만 페이지가 Refresh되다면 수정했던 내용이 사라지게 됩니다. 수정했던 내용을 데이터베이스에 저장하고 출력되게 끔 만들어준다면 페이지가 Refresh 되어도 데이터가 남아 있을 수 있게 만들 수 있습니다.

 

이번 시간에는 Contenteditable에 대해 알아보고 수정 가능한 테이블 만들어보는 실습을 진행했습니다.

 

감사합니다.