<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <h1>동적 테이블</h1> <table border="1" id="list_table"> <colgroup> <col style="width: 70px"> <col style="width: 200px"> <col style="width: 300px"> <col style="width: 200px"> </colgroup> <thead> <tr> <th>Number</th> <th>Name</th> <th>Birth</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>홍길동</td> <td>2001/02/24</td> <td><a href="#" class="delete-link">삭제</a></td> </tr> <tr> <td>2</td> <td>일지매</td> <td>1999/06/14</td> <td><a href="#" class="delete-link">삭제</a></td> </tr> <tr> <td>3</td> <td>임꺽정</td> <td>1997/09/01</td> <td><a href="#" class="delete-link">삭제</a></td> </tr> </tbody> </table> <br> <br> <h3>추가 입력 테이블</h3> <table border="1" id="append_table"> <colgroup> <col style="width: 70px"> <col style="width: 200px"> <col style="width: 300px"> <col style="width: 200px"> </colgroup> <thead> <tr> <th><label for="add_no">번호</label></th> <th>이름</th> <th>생년월일</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td><input type="text" id="add_no"></td> <td><input type="text" id="add_name"></td> <td><input type="text" id="add_birth"></td> <td><button type="button" id="append_row">데이터 추가</button></td> </tr> </tbody> </table> <script type="text/javascript"> // 추가 $("#append_row").on( "click", function() { $("#list_table").append( $("<tr>").append( $("<td>").append($("#add_no").val()), $("<td>").append($("#add_name").val()), $("<td>").append($("#add_birth").val()), $("<td>").append( $("<a>").prop("href", "#") .addClass("delete-link") .append("삭제")))); }); // 삭제 $("#list_table").on("click", ".delete-link", function() { $(this).parent().parent().remove(); }); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="style.css" type="text/css" media="print, projection, screen"> <!-- <script type="text/javascript" src="./jquery/jquery-latest.js"></script> --> <script type="text/javascript" src="./jquery/jquery.tablesorter.js"></script> <script type="text/javascript" src="./jquery/jquery.tablesorter.min.js"></script> <style type="text/css"> #sampleTable td:nth-of-type(3) { text-align: right; padding-right: 0.7em; } #sampleTable td:nth-of-type(4) { text-align: right; padding-right: 0.7em; } #sampleTable td:nth-of-type(5) { text-align: right; padding-right: 0.7em; } </style> </head> <body> <h1>동적 테이블</h1> <table id="list_table" class="tablesorter"> <thead> <tr> <th>Number</th> <th>Name</th> <th>Birth</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>홍길동</td> <td>2001/02/24</td> <td><a href="#" class="delete-link">삭제</a></td> </tr> <tr> <td>2</td> <td>일지매</td> <td>1999/06/14</td> <td><a href="#" class="delete-link">삭제</a></td> </tr> <tr> <td>3</td> <td>임꺽정</td> <td>1997/09/01</td> <td><a href="#" class="delete-link">삭제</a></td> </tr> </tbody> </table> <br> <br> <h3>추가 입력 테이블</h3> <table border="1" id="append_table"> <colgroup> <col style="width: 70px"> <col style="width: 200px"> <col style="width: 300px"> <col style="width: 200px"> </colgroup> <thead> <tr> <th><label for="add_no">번호</label></th> <th>이름</th> <th>생년월일</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td><input type="text" id="add_no"></td> <td><input type="text" id="add_name"></td> <td><input type="text" id="add_birth"></td> <td><button type="button" id="append_row">데이터 추가</button></td> </tr> </tbody> </table> <script type="text/javascript"> $("#list_table").tablesorter(); // 추가 $("#append_row").on( "click", function() { $("#list_table").append( $("<tr>").append( $("<td>").append($("#add_no").val()), $("<td>").append($("#add_name").val()), $("<td>").append($("#add_birth").val()), $("<td>").append( $("<a>").prop("href", "#") .addClass("delete-link") .append("삭제")))); $("#list_table").trigger("update"); }); // 삭제 $("#list_table").on("click", ".delete-link", function() { $(this).parent().parent().remove(); $("#list_table").trigger("update"); }); </script> </body> </html>