테이블 tr 삭제 하기 (table row delete)

목록형 화면에서 그리드가 그려지고 그리드의 table에서 특정 tr만 삭제를 해야하는 경우가 많습니다.

이럴 때 한번에 하나씩 tr을 제거하는 방법은 row마다 버튼을 두어 삭제하는 방법과 체크박스를 두어 체크가 하나만 되어있는지 체크 후 삭제하는 방법 입니다.

한번에 일괄 적으로 삭제하는 방법은 체크박스를 사용해야 하겠지요...ㅎ

오늘은 버튼을 이용한 한번에 하나씩의 row를 삭제하는 테이블 tr 삭제 하기 (table row delete)에 대해서 알아보겠습니다.

먼저 아래 소스는 목록 그리드에 해당하는 table을 그려주는 부분 입니다.
// 목록 테이블 그리기
  function getCampaignCustomerList()
     {
   if (validation() == false) return;
 
         var jsonObj = {};

// 조건 생성
         jsonObj.city = $.trim(frmPopUp.city.value);
         jsonObj.town = $.trim(frmPopUp.town.value);
       
         jsonObj.nowPage  = _nowPage; // 현재 페이지
       
         if(SESSION_INFO.listCount == null || SESSION_INFO.listCount == "")
             jsonObj.listCount  = 10;                                // 리스트 목록 갯수 공통 사용
         else
             jsonObj.listCount  = parseInt(SESSION_INFO.listCount);      // 리스트 목록 갯수 공통 사용

         $.ajax(
         {
             type       : "POST",
             url        : "${pageContext.request.contextPath}/select/Campaign.getCampaignCustomerList/action.do",
             dataType   : "json",
             data       : {"param" : JSON.stringify(jsonObj)},
             async      : false,
             beforeSend : function(xhr)
             {
                 // 전송 전 Code
             },
             success    : function(result)
             {
                 $("#tbDataRow").empty().append("");

                 for (var i=0; i<result.length; i++)
                 {
                     var htmlString = "";

                     htmlString += "<tr>";
                   
                     // 아파트 동
                     htmlString += "<td class='text_left'>" + result[i].block_ + "</td>";
                   
                     // 아파트 호수
                     htmlString += "<td class='text_left'>" + result[i].unit_ + "</td>";
                   
                     // 삭제 버튼
                     htmlString += "<td class='text_center'><button type='button' class='btn_common' onClick='deleteLine(this);'>삭제</button></td>";

                     htmlString += "</tr>";

                     $("#tbDataRow").append(htmlString);
                 }

                 if (result.length > 0) _pageNavi.setPageNumber(result[0].totalPage, "getCampaignCustomerList()"); // 페이지네비 생성
             },
             error      : function(xhr)
             {
                 // Error 발생 Code
                 alert(xhr.responseText);
             }
         });
     }

* 검색하기 전 필수 검색 항목을 체크하는 부분이 있습니다.
// 필수 입력 체크
       function validation()
        {
            if ($.trim(frmPopUp.city.value) == "")
            {
                alert("'지역선택의 시도'을 선택하여 주십시오.");
                frmPopUp.city.focus();
                return false;
            }

            return true;
        }

그리고 위에서 table의 tr을 그려줄 때 삭제 버튼을 만들면서 클릭시 deleteLine 자바스크립트 함수를 호출하게 만들었었줘...ㅎ 아래는 deleteLine 함수의 내용 입니다.
// 테이블 tr 라인 삭제
        function deleteLine(obj)
        {
         var tr = $(obj).parent().parent();
       
         //라인 삭제
         tr.remove();
        }

뭐지...뭐지...엄청 간단하줘...ㅎ
체크박스를 사용하면 더욱 간단한데요...그 방법은 나중에 올리겠습니다.



여기까지 테이블 tr 삭제 하기 (table row delete)에 대해서 알아보았습니다.
오늘도 행복하고 좋은 하루되세요~~~^^