반응형
jquery 동적 테이블 행 추가/삭제 소스 입니다.
테이블을 미리 생성하고, 추가 버튼을 통해서 입력폼을 생성 합니다. 입력폼 오른쪽에 삭제 버튼을 두어
원하시는 입력폼은 삭제 하실수 있습니다. 입력폼의 마지막 번호를 가져와 +1씩 증가하는 NO를 확인 하실 수 있습니다.
추가로 생성되는 입력폼은 숫자만 입력되도록 제한을 걸어 봤습니다. (onkeyup)
아래 예제를 통해 소스를 같이 보시면 이해하기 쉽습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).on('click', "[name='dtl_del']", function(){
var tr = $(this).parent().parent().parent();
tr.remove();
});
function btn_add(){
var row_idx = parseInt($(".row_idx:last").text()) + 1;
if(!row_idx){row_idx=1;}
var str = "";
str += "<tr>";
str += " <td style='text-align:center;' class=\"row_idx\">"+row_idx+"</td>";
str += " <td style='text-align:center;'><input type=\"text\" onkeyup=\"this.value=this.value.replace(/[^0-9]/g,'');\"></td>";
str += " <td style='text-align:center;'><input type=\"text\" onkeyup=\"this.value=this.value.replace(/[^0-9]/g,'');\"></td>";
str += " <td style='text-align:center;'><input type=\"text\" onkeyup=\"this.value=this.value.replace(/[^0-9]/g,'');\"></td>";
str += " <td style='text-align:center;'>";
str += " <div class=\"btn-group\">";
str += " <button type='button' class='btn btn-primary btn-sm' name='dtl_del'>삭제</button>";
str += " </div>";
str += " </td>";
str += "</tr>";
$("#tbody_id:last").append(str);
}
</script>
<body>
<table style="border: 1px solid; width:100%;">
<thead>
<tr>
<th style="width:20%; text-align:center;vertical-align:middle;">No</th>
<th style="width:20%; text-align:center;vertical-align:middle;">제목</th>
<th style="width:20%; text-align:center;vertical-align:middle;">내용</th>
<th style="width:20%; text-align:center;vertical-align:middle;">추가내용</th>
<th style="width:20%; text-align:center;">
<button class="btn btn-default btn-sm" type="button" onclick='btn_add();'>
<strong>추가</strong>
</button>
</th>
</tr>
</thead>
<tbody id="tbody_id">
</tbody>
</table>
</body>
</html>
↓↓↓↓↓ 아래 예제를 통해서 추가/삭제를 해보세요!
| No | 제목 | 내용 | 추가내용 |
|---|