-
728x90
관리자 페이지등에서 잊을만 하면 사용하는 기능인데..
그간 샘플링이 안되어서 매번 그때 그때 커스터마이징해서 썻던것인데 정리해보았습니다.
Test Url : http://www.uhoon.co.kr/test/2541.html
<!DOCTYPE html> <html> <head> <title>테이블에 동적으로 TR 추가 /삭제 하기</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(function() { $("#btnAddRow").on("click",function() { // clone $.trClone = $("#memberTable tr:last").clone().html(); $.newTr = $("<tr>"+$.trClone+"</tr>"); // append $("#memberTable").append($.newTr); // delete Button 추가 $.btnDelete = $(document.createElement("input")); $.btnDelete.attr({ name : "btnRemove", type : "button" , value : "삭제" }); $("#memberTable tr:last td:last").html(""); $("#memberTable tr:last td:last").append($.btnDelete); // 버튼에 클릭 이벤트 추가 $("#memberTable tr>td:last>input[type='button']").on('click', function(){ $(this).parent().parent().remove(); }); }); // 초기화 $("#tableReset").on("click",function(){ $("#frmTest").each(function(){ this.reset(); }); $("input[name='btnRemove']").each(function () { $(this).trigger('click'); }); }); }); </script> </head> <body > <div style="width:500px;text-align:right;"> <input type="button" value="행추가" id="btnAddRow" /> <input type="button" value="reset" id="tableReset"/> </div> <form method="post" id="frmTest"> <table id="memberTable" border="1" style="width:500px;"> <tr> <td><input type="text" id="fullName" /></td> <td><input type="text" id="age" /></td> <td><input type="text" id="addr" /></td> <td style="width:50px;"></td> </tr> </table> </form> </body> </html>728x90댓글
꼰대 개발자의 블로그
꼰대가 흐름을 따라가고 싶어서 기록하는 블로그
