[jQuery] 테이블 tr 동적 추가 삭제하기

안녕하세요 오늘은 해당 테이블의 tr 개수를 구하는 방법에 대해 알려드리도록 하겠습니다.

 

우선 간단한 테이블 예제 코드입니다.

<table id="myTable" class="table">
    <thead>
        <tr class="active">
            <td class="text-center"><strong>column1</strong></td>
            <td class="text-center"><strong>column2</strong></td>
            <td class="text-center"><strong>column3</strong></td>
        </tr>
    </thead>
    <tbody id="tbody">
        <tr style="font-size: 12px; font-weight: 600;">
            <td class="text-center">1</td>
            <td class="text-center">내용</td>
            <td class="text-center">기타</td>
        </tr>
    </tbody>
</table>

 

자 그리고 항목 추가, 항목을 삭제할 버튼도 작성합니다.

<button type="button" class="btn btn-default"  onclick="rowAdd();">항목 추가</button>
<button type="button" class="btn btn-default" onclick="rowDelete();">항목 삭제</button>

 

항목 추가는 rowAdd() 함수, 항목 삭제는 rowDelete() 함수로 작성합니다.

 

자 다음과 같이 테이블을 생성하고 항목 추가를 하면 밑에 항목이 생기고

 

항목을 삭제하면 마지막 열을 삭제하도록 하겠습니다.

 

 

자 그럼 항목 추가에 대한 함수를 <script></script> 사이에 작성하도록 합니다.

 

tr 부분을 복사해서 사용하시면 편합니다.

<script>
    function rowAdd() {
        var trCnt = $('#myTable tr').length;
        if(trCnt < 11){
            var innerHtml = "";
            innerHtml += '<tr style="font-size: 12px; font-weight: 600;">';
            innerHtml += '    <td class="text-center">'+trCnt+'</td>';
            innerHtml += '    <td class="text-center">내용</td>';
            innerHtml += '    <td class="text-center">기타</td>';
            innerHtml += '</tr>';
            
            $('#myTable > tbody:last').append(innerHtml);
        }else{
            alert("최대 10개까지만 가능합니다.");
            return false;
        }
    }
</script>

 

자 여기서 참고하실 사항은

 

var trCnt = $('#myTable tr').length;

 

이 부분은 테이블의 tr에 대한 개수를 가져오는 것입니다.

 

row가 1인데도 +1이 되어 2로 가져오는 이유는 thead 부분의 tr도 가져오기 때문입니다.

 

불편하신 분들은 각자 코드를 본인이 원하는 대로 수정하시면 됩니다.

 

자 그리고 항목을 추가해보고 다음과 같이 추가가 된다면 성공한 것입니다.

 

 

다음은 항목을 삭제하는 함수를 구현합니다.

<script>
    function rowDelete(){
        var trCnt = $('#myTable tr').length;
        if(trCnt>2){
            $('#myTable > tbody:last > tr:last').remove();
        }else{
            return false;
        }
    }
</script>

 

이렇게 하시면 row 추가와 삭제가 구현이 가능합니다.

 

이상입니다 감사합니다.