jQuery를 이용한 행추가, 행삭제, 행초기화 구현하기

요즘은 그리드 툴이 많아서 직접 행추가, 삭제, 초기화 등 기능을 직접 구현할 일이 별로 없는데 그래도 직접 만들어 보았습니다.

다른 페이지에서도 사용할 수 있도록 하기 위해 나름 생각을 해서 구현하였습니다.

기본 테이블 구조는 아래와 같고 각각의 기능을 FUNCTION 으로 만들었습니다.

- 기본 테이블 구조

    <input type="button" id="" name="">행추가</input>

    <input type="button" id="" name="">행삭제</input>

    <table>

        <tr>

            <th><input type="checkbox" id="" name=""/></th>

            <th>헤더1</th>

            <th>헤더2</th>

            <th>헤더3</th>

        </tr>

        <tr>

            <td><input type="checkbox" id="" name=""/><td>

            <td>내용1</td>

            <td>내용2</td>

            <td>내용3</td>

        </tr>

    </table>

테이블 구조는 정확하게 생각이 나지 않아서 대충 구조만 참고하시면 될 것 같습니다.

- 행초기화 function

      fncRowReset = function(obj){

            $(obj).find(':input').each(function(){

                  this.value = '';

                  this.checked = '';

            });

      };

초기화 할 행 Object를 받아서 input 의 값을 비워주고 checkbox 일 경우 체크를 해제합니다.

- 행추가 function

      fncAddRow = function(obj){

            

            var varTable = $(obj).parent().find('>table'); // 행추가 table

            var varTableLastRow = varTable.find('tr:last'); // 행추가 마지막 row

            var copyRow = varTableLastRow.clone(true); // 행추가 마지막 row 복사

                        

            // 행추가 row 값 초기화

            fncRowReset(copyRow);

                        

            // 행추가 맨 마지막에 append

            varTable.append(copyRow);

      };

행추가 버튼을 object로 받아 그 위치를 기준으로 추가할 table을 찾고 그 table의 마지막 row를 복사해서 그 아래에 추가합니다.

- 행삭제 function

      fncDeleteRow = function(obj){

            var varTable = $(obj).parent().find('>table');      // 행삭제 table

            var trCount = varTable.find('>tbody >tr').size();     // 행삭제 body row count

            if(trCount == 1){

                  alert('더이상 삭제할 수 없습니다.');

                  return;

            }

            if(confirm("선택하신 항목을 삭제하시겠습니까?")){

                  var chkCnt = 0;

                  varTable.find('>tbody input:checkbox').each(function(idx){

                        if(this.checked){

                              var nowRowSize = varTable.find('>tbody >tr').size();

                              var choiceRow = $(this).parent().parent();

                              if(nowRowSize == 1){

                                    // 마지막 row 값 초기화

                                    fncRowReset(choiceRow);     

                              } else {

                                    // 행삭제

                                    choiceRow.remove();

                              }

                              chkCnt++;

                        }

                  });

                  

                  if(chkCnt == 0){

                        alert('선택된 항목이 없습니다.');

                        return;

                  }

            }

            

            var newTrCnt = varTable.find('>tbody >tr').size();

            

            // 행삭제 tr id 초기화 (순서대로)

            for(var i = 0; i < newTrCnt; i++){

                  varTable.find('>tbody >tr:eq('+i+')').attr('id', i);

            }

      };

행삭제 버튼을 Object로 받아 그 위치를 기준으로 table의 선택한 row를 삭제합니다.

row가 1개일 경우에는 삭제가 불가능하게 막습니다.

- 행 전체선택 / 해제 function

      fncCheckAll = function(obj){

            var chkAll = $(obj);

            var varTable = chkAll.parent().parent().parent().parent();

            

            var chkYn = obj.checked;

            

            varTable.find('>tbody input:checkbox').each(function(idx){

                  this.checked = chkYn;

            });

      };

전체 선택 checkbox를 선택하면 table의 checkbox를 선택 / 해제 합니다.

이렇게 직접 구현할 일은 없을 것 같지만 그래도 남겨놓으면 쓸때가 있을 것 같아서 블로그에 남겨둡니다.