jQuery 동적 tr 생성 및 삭제

개요

기본 row는 4개 add 시에 row 4개 증가 del 시에 row -4

count  및 fullcount 변수 설정

@count = 행개수

@fullcount = 행 총개수

3개이상 추가시에 제한 alert

마지막 한개 행은 del 못함

table이라는 class를 가진 tbody에 table2라는 class를 가진 tr을 모두 복사한다.

t 라는 변수명 closet 삽입

5번째 tr삭제

4번째 tr삭제

3번째 tr삭제

2번째 tr삭제

1번째 tr삭제

script

 var count = 0;
        var fullcount = 3;
    
     // clone class를 가진 버튼 클릭
        $("#addrow").on("click", function() {
            
            count++;
            alert(count);
            if(count > fullcount){
                alert("최대 3개까지만 가능합니다.");
                count = 3;
                return false;
             } else {
                 
                  $(".table tbody").append($(".table2 tr").clone(true));
                  
                  if(count > 1){
                      var t = $(this).closest("tr");
                  }
                    
             }
        });
       
        // remove class를 가진 버튼 클릭
        
        $("#delrow").on("click", function() {
            count--;
            alert(count);
            
            if(count < 0){
                alert("더 이상 삭제할 수 없습니다.");
                count = 0;
                return false;
            }
            
            var t = $("#btn").closest("tr");
            t.prev("tr").prev("tr").prev("tr").prev("tr").prev("tr").remove();
            t.prev("tr").prev("tr").prev("tr").prev("tr").remove();
            t.prev("tr").prev("tr").prev("tr").remove();
            t.prev("tr").prev("tr").remove();
            t.prev("tr").remove();
            t.remove();
 
        });

jsp

                     <table class="table" width='800px' cellpadding='5' cellspacing='0' border='1' align='center' style='border-collapse:collapse; border:1px gray solid;'>
                     <tr>
                        <th align="center" style="background-color: #E6E6E6; height: 50px">품명</th>
                        <th align="center" style="background-color: #E6E6E6; height: 50px">규격</th>
                        <th align="center" style="background-color: #E6E6E6; height: 50px">단위</th>
                        <th align="center" style="background-color: #E6E6E6; height: 50px">수량</th>
                        <th align="center" style="background-color: #E6E6E6; height: 50px">단가</th>
                        <th align="center" style="background-color: #E6E6E6; height: 50px">금액</th>
                        <th align="center" style="background-color: #E6E6E6; height: 50px">비고</th>
                      </tr>
                      </table>
                       <table class="table2" width='800px' cellpadding='5' cellspacing='0' border='1' align='center' style='border-collapse:collapse; border:1px gray solid;'>
                      <tr>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="productname1" id="productname1" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="standard1" id="standard1" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="unit1" id="unit1" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="cnt1" id="cnt1" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="unitprice1" id="unitprice1" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="price1" id="price1" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="etc1" id="etc1" style="height: 20px"/></td>
                      </tr>
                      <tr>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="productname2" id="productname2" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="standard2" id="standard2" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="unit2" id="unit2" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="cnt2" id="cnt2" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="unitprice2" id="unitprice2" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="price2" id="price2" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="etc2" id="etc2" style="height: 20px"/></td>
                      </tr>
                      <tr>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="productname3" id="productname3" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="standard3" id="standard3" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="unit3" id="unit3" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="cnt3" id="cnt3" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="unitprice3" id="unitprice3" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="price3" id="price3" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="etc3" id="etc3" style="height: 20px"/></td>
                      </tr>
                      <tr>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="productname4" id="productname4" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="standard4" id="standard4" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="unit4" id="unit4" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="cnt4" id="cnt4" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="unitprice4" id="unitprice4" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="price4" id="price4" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="etc4" id="etc4" style="height: 20px"/></td>
                      </tr>
                       <tr>
                           <td align="center" style="background-color: white; height: 50px">합계</td>
                           <td align="center" style="background-color: white; height: 50px"></td>
                           <td align="center" style="background-color: white; height: 50px"></td>
                           <td align="center" style="background-color: white; height: 50px"></td>
                           <td align="center" style="background-color: white; height: 50px"></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="estsum" id="estsum" style="height: 20px"/></td>
                           <td align="center" style="background-color: white; height: 50px"><input type="text" name="etc5" id="etc5" style="height: 20px"/></td>
                      </tr>
                      <tr>
                          <td id="btn">
                              <input type="button" id="addrow" class="table-btn-3" value="행추가"/>
                            <input type="button" id="delrow" class="table-btn-3" value="행삭제"/>
                          </td>
                      </tr>                   
                    </table>