[ JavaScript ] 테이블 동적 행 추가/삭제하기

728x90

안녕하세요! 오늘은 자바스크립트 append()와 remove()로 테이블 행을 추가/삭제해보려고합니다.

우선 html에서 테이블을 만들어보겠습니다. 각 버튼에는 onClick으로 각각 추가/삭제 이벤트를 주었습니다.

rowAdd_Remove.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[자바스크립트]row 클릭 시 값 가져오기</title>
    <style>
    	* {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    body {
        padding: 25px;
    }

    .container {
        max-width: 900px;
        width: 100%;
        background-color: #fff;
        margin: auto;
        padding: 10px;
        border-radius: 5px;
        overflow-x: auto;
    }

    ._table {
        width: 100%;
        border-collapse: collapse;
    }

    ._table :is(th, td) {/*:is 반복 줄임*/
        border: 1px solid #0002;
        padding: 8px 10px;
    }

    .form_control {
        border: 1px solid #0002;
        background-color: transparent;
        outline: none;
        padding: 8px 12px;
        font-family: 1.2rem;
        width: 100%;
        color: #333;
        transition: 0.3s ease-in-out;
    }

    .form_control::placeholder {
        color: inherit;
        opacity: 0.4;
    }

    .form_control:is(:focus, :hover) {
        box-shadow: inset 0 1px 6px #0002;
    }

    .success {
        background-color: #24b96f !important;
    }

    .danger {
        background-color: #ff5722 !important;
    }

    .action_container {
        display: inline-flex;
    }

    .action_container>* {
        border: none;
        outline: none;
        color: #fff;
        text-decoration: none;
        display: inline-block;
        padding: 8px 14px;
        cursor: pointer;
        transition: 0.3s ease-in-out;
    }

    .action_container>*+* {
        border-left: 1px solid #fff5;
    }

    .action_container>*:hover {
        border-color: transparent;
        box-shadow: 0 2px 10px #0004;
        border-radius: 2px;
    }
    </style>	
</head>
<body>
	<div class="container">
  <table class="_table">
    <thead>
      <tr>
        <th>이름</th>
        <th>국가</th>
        <th>전화번호</th>
        <th width="30px">
          <div class="action_container">
            <button class="success" onclick="add_tr('table_body')">추가
            </button>
          </div>
        </th>
      </tr>
    </thead>
    <tbody id="table_body">
      <tr>
        <td>
          <input type="text" class="form_control" placeholder="김철수">
        </td>
        <td>
          <input type="text" class="form_control" placeholder="한국">
        </td>
        <td>
          <input class="form_control" placeholder="010-1234-1234"></>
        </td>
        <td>
          <div class="action_container">
            <button class="danger" onclick="remove_tr(this)">삭제
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<script type="text/javascript" src="addRemove.js"></script>
</body>
</html>

위와 같이 작성하면 아래와 같이 표가 구현됩니다.

addRemove.js

function add_tr(table_id) {//행 추가
    let table_body = document.getElementById(table_id);
    let first_tr   = table_body.firstElementChild;
    let tr_clone   = first_tr.cloneNode(true);//*1)복제된 node 반환

    table_body.append(tr_clone);
    clean_first_tr(table_body.firstElementChild);
}

function clean_first_tr(firstTr) {//값 초기화
    let children = firstTr.children;//*2) 자식 요소가 포함된 HTMLCollection을 반환
    
    children = Array.isArray(children) ? children : Object.values(children);//*3)
    children.forEach(x=>{
        if(x !== firstTr.lastElementChild){//마지막child가 아닐때
            x.firstElementChild.value = '';//td의 첫번째 child > input값 초기화
        }
    });
}

function remove_tr(This) {//행 삭제
    //*4)closet:현재 엘리멘트에서 가장 가까운 조상을 반환
    if(This.closest('tbody').childElementCount == 1)
    {
        alert("삭제할 수 없습니다.");
    }else{
        This.closest('tr').remove();//삭제
    }
}

위 코드가 아래와 같이 동작하는 것을 확인할 수 있습니다.

아래 링크 참고바랍니다.

*0) append() / remove()

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

Element.append() - Web APIs | MDN

The Element.append() method inserts a set of Node objects or string objects after the last child of the Element. String objects are inserted as equivalent Text nodes.

developer.mozilla.org

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

Element.remove() - Web APIs | MDN

The Element.remove() method removes the element from the DOM.

developer.mozilla.org

*1)https://developer.mozilla.org/ko/docs/Web/API/Node/cloneNode

Node.cloneNode() - Web API | MDN

복제되어야 할 node.

developer.mozilla.org

*2)

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

Element.children - Web APIs | MDN

The read-only children property returns a live HTMLCollection which contains all of the child elements of the element upon which it was called.

developer.mozilla.org

*3)

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

Array.isArray() - JavaScript | MDN

Array.isArray() 메서드는 인자가 Array인지 판별합니다.

developer.mozilla.org

*4)

https://developer.mozilla.org/ko/docs/Web/API/Element/closest

Element.closest() - Web API | MDN

Element의 closest() 메서드는 주어진 CSS 선택자와 일치하는 요소를 찾을 때까지, 자기 자신을 포함해 위쪽(부모 방향, 문서 루트까지)으로 문서 트리를 순회합니다.

developer.mozilla.org

'JavaScript' 카테고리의 다른 글

[JavaScript] addEventListener 한 번만 동작하게 만들기 (0)	2022.09.21
[JavaScript] 문자열 모든 공백 제거하기 (0)	2022.09.02
[ JavaScript ] 테이블 행 값 가져오기 (0)	2022.08.31
[JavaScript] 파일 드래그 앤 드롭하기 (0)	2022.08.22
[JavaScript] 현재 브라우저가 실행되고 있는 운영체제 이름을 가져오기 (0)	2022.08.18

팀노바 & Stickode 개발자 블로그

[ JavaScript ] 테이블 동적 행 추가/삭제하기

'JavaScript' 카테고리의 다른 글

티스토리툴바

[ JavaScript ] 테이블 동적 행 추가/삭제하기

'JavaScript' 카테고리의 다른 글

관련글

티스토리툴바