<!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>2002/07/14</td>
<td>
<a href="#" class="delete-link">삭제</a>
</td>
</tr>
<tr>
<td>3</td>
<td>임꺽정</td>
<td>2000/12/22</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>
<tbody>
</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>
'JQuery > JQuery 기본' 카테고리의 다른 글
| [JQuery] 달력 sort 만들기 (0) | 2018.08.08 |
|---|---|
| [JQuery] 우편번호 이론 만들기 예제 (0) | 2018.08.08 |
| [JQuery] 우편번호 사용 사이트 및 코드 (0) | 2018.08.08 |
| [JQuery] 달력만들기 (0) | 2018.08.08 |
| [JQuery] JQuert UI 사용하기 (이미지 투명도) (0) | 2018.08.07 |
