JQuery로 테이블 행(ROW) 복사 뜨기.
프로젝트를 하다보면 동적으로 TR 행을 복사해야 한다던가 하는 일이 종종 있습니다. 그러니 한번 써보도록 하죠. 참고로 이건 제가 작성했던 방식입니다.
-- HTML 본문 --
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="아래 CSS 파일명"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="아래 JAVA SCRIPT 파일명"></script>
</head>
<body>
<table class="listBody">
<thead>
<tr>
<th>이벤트</th>
<th>제목</th>
<th>작성자</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table class="hidden listTemplate">
<tbody>
<tr>
<td>
<input type="button" class="ctrlBTN cloneBTN" value="복사"/>
<input type="button" class="ctrlBTN removeBTN" value="삭제"/>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
-- CSS 본문 --
@charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
width: 100%;
}
.listBody {
width: 100%;
}
th {
background-color: silver;
padding: 5px 5px;
font-weight: bold;
text-align: center;
}
.hidden {
display: none;
}
.ctrlBTN {
padding: 3px 5px;
border-radius: 5px;
box-shadow: 0px 0px 15px 5px white inset;
background-color: white;
}
.ctrlBTN:hover {
background-color: silver;
}
-- JAVA SCRIPT --
$(function(){
// 이 부분은 cloneBTN 클래스가 부여된 요소에 이벤트를 부여하며, 마찬가지로 복사를 수행합니다.
$(".cloneBTN").on("click", function() {
$(".listBody tbody").append($(".listTemplate tr").clone(true));
});
// 이 부분은 삭제를 클릭할때 동작하는 기능을 부여합니다.
$(".removeBTN").on("click", function() {
$("tr").has(this).remove();
});
// 이 부분은 페이지 로딩이 끝나면 우선 한줄 카피해 두기 위한 것입니다.
// 다만, 첫 한줄은 삭제를 방지하기 위해, 첫 행 추가가 완료되면, 삭제버튼을 지웁니다.
$.when(
$(".listBody tbody").append($(".listTemplate tr").clone(true))
).then(function(){
$(".listBody .removeBTN").remove();
});
});
얼추 이런식 이었는데 오동작 가능성이 있을수 있으나, 그냥 참고 하시면 되구 오동작 하면 디버그 모드에서 확인해 주세용. +_+;;;JQ
-- HTML 본문 --
<!DOCTYPE html>
<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="아래 CSS 파일명"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="아래 JAVA SCRIPT 파일명"></script>
</head>
<body>
<table class="listBody">
<thead>
<tr>
<th>이벤트</th>
<th>제목</th>
<th>작성자</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table class="hidden listTemplate">
<tbody>
<tr>
<td>
<input type="button" class="ctrlBTN cloneBTN" value="복사"/>
<input type="button" class="ctrlBTN removeBTN" value="삭제"/>
</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
-- CSS 본문 --
@charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
width: 100%;
}
.listBody {
width: 100%;
}
th {
background-color: silver;
padding: 5px 5px;
font-weight: bold;
text-align: center;
}
.hidden {
display: none;
}
.ctrlBTN {
padding: 3px 5px;
border-radius: 5px;
box-shadow: 0px 0px 15px 5px white inset;
background-color: white;
}
.ctrlBTN:hover {
background-color: silver;
}
-- JAVA SCRIPT --
$(function(){
// 이 부분은 cloneBTN 클래스가 부여된 요소에 이벤트를 부여하며, 마찬가지로 복사를 수행합니다.
$(".cloneBTN").on("click", function() {
$(".listBody tbody").append($(".listTemplate tr").clone(true));
});
// 이 부분은 삭제를 클릭할때 동작하는 기능을 부여합니다.
$(".removeBTN").on("click", function() {
$("tr").has(this).remove();
});
// 이 부분은 페이지 로딩이 끝나면 우선 한줄 카피해 두기 위한 것입니다.
// 다만, 첫 한줄은 삭제를 방지하기 위해, 첫 행 추가가 완료되면, 삭제버튼을 지웁니다.
$.when(
$(".listBody tbody").append($(".listTemplate tr").clone(true))
).then(function(){
$(".listBody .removeBTN").remove();
});
});
얼추 이런식 이었는데 오동작 가능성이 있을수 있으나, 그냥 참고 하시면 되구 오동작 하면 디버그 모드에서 확인해 주세용. +_+;;;JQ
댓글
댓글 쓰기