jQuery로 테이블 tr 동적으로 추가,삭제 하기
Javascript 예제 2011. 11. 11. 03:14
jQuery를 사용해 테이블을 동적으로 변화시키는 예제를 맹글어 보았다.
jQuery 로 맹글어서 왠만한 브라우져에서는 다 작동할 것이라 예측한다. 살짝 응용하면 다른 재미진 것도 할 수 있을듯~
만들어질 것은 다음과 같다. (직접 클릭해 보기바람)
| 옵션명 | 항목명 | 필수항목 | 가격 | 재고 | 옵션추가 |
|---|---|---|---|---|---|
소스
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
// 항목추가 버튼 클릭시
$(".addBtn").click(function(){
var clickedRow = $(this).parent().parent();
var cls = clickedRow.attr("class");
// tr 복사해서 마지막에 추가
var newrow = clickedRow.clone();
newrow.find("td:eq(0)").remove();
newrow.insertAfter($("#example ."+cls+":last"));
// rowspan 증가
resizeRowspan(cls);
});
// 삭제버튼 클릭시
$(".delBtn").live("click", function(){
var clickedRow = $(this).parent().parent();
var cls = clickedRow.attr("class");
// 각 항목의 첫번째 row를 삭제한 경우 다음 row에 td 하나를 추가해 준다.
if( clickedRow.find("td:eq(0)").attr("rowspan") ){
if( clickedRow.next().hasClass(cls) ){
clickedRow.next().prepend(clickedRow.find("td:eq(0)"));
}
}
clickedRow.remove();
resizeRowspan(cls);
});
// cls : rowspan 을 조정할 class ex) item1, item2, ...
function resizeRowspan(cls){
var rowspan = $("."+cls).length;
$("."+cls+":first td:eq(0)").attr("rowspan", rowspan);
}
});
</script>
</head>
<body>
<table id="example" border="1px">
<tr>
<th>옵션명</th>
<th>항목명</th>
<th>필수항목</th>
<th>가격</th>
<th>재고</th>
<th>옵션추가</th>
</tr>
<tr class="item1">
<td><input type="text" /><button class="addBtn">항목추가</button></td>
<td><input type="text" /></td>
<td><input type="checkbox" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><button class="delBtn">삭제</button></td>
</tr>
<tr class="item2">
<td><input type="text" /><button class="addBtn">항목추가</button></td>
<td><input type="text" /></td>
<td><input type="checkbox" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><button class="delBtn">삭제</button></td>
</tr>
<tr class="item3">
<td><input type="text" /><button class="addBtn">항목추가</button></td>
<td><input type="text" /></td>
<td><input type="checkbox" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><button class="delBtn">삭제</button></td>
</tr>
<tr class="item4">
<td><input type="text" /><button class="addBtn">항목추가</button></td>
<td><input type="text" /></td>
<td><input type="checkbox" /></td>
<td><input type="text" /></td>
<td><input type="text" /></td>
<td><button class="delBtn">삭제</button></td>
</tr>
</table>
</body>
</html>
2011/11/09 - [Javascript] - javascript Array 에 protoype으로 remove 함수 추가하기
2011/11/07 - [Javascript] - javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기
2011/11/02 - [쓸만한지식] - 옥션 바로가기 링크
2011/11/01 - [Javascript] - Javascript 문자열 바이트수 가져오기(byteLength)
2011/09/09 - [Javascript] - Javascript Date format 함수
2011/09/28 - [Javascript] - Javascript Timer setTimeout(), setInterval() 함수 나름 새로운 사용법 -_-
2011/11/07 - [Javascript] - javascript 로 PC에서 접속했는지 모바일 기기에서 접속했는지 체크하기
2011/11/02 - [쓸만한지식] - 옥션 바로가기 링크
2011/11/01 - [Javascript] - Javascript 문자열 바이트수 가져오기(byteLength)
2011/09/09 - [Javascript] - Javascript Date format 함수
2011/09/28 - [Javascript] - Javascript Timer setTimeout(), setInterval() 함수 나름 새로운 사용법 -_-
'Javascript 예제' 카테고리의 다른 글
| jQuery 로 페이지를 벗어날때 확인창 띄우기 (1) | 2012.06.08 |
|---|---|
| jQuery 로 원하는 갯수만큼 checkbox 선택하기 (1) | 2011.11.24 |
| jQuery 로 메뉴 접었다~ 펼쳤다~ 구현하기 (39) | 2011.11.18 |
| jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 (2) | 2011.11.15 |
| jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 (33) | 2011.11.11 |
