제이쿼리로 테이블 상위 하위 둘다 삭제하는기능 채택완료
안녕하세요
다름이 아니라 테이블이 이런식으로 있거든요
------------------------------------
테이블 상위 | [추가] [삭제]
------------------------------------
테이블 하위 | [삭제]
------------------------------------
테이블 상위에 삭제버튼을 누르면 상위+하위까지 삭제되고
테이블 하위에 삭제버튼을 누르면 하위만 삭제되게 기능을 만들려고합니다.
저 테이블이 두가지만 있는것이 아니라 경우에 따라서 추가될수도 있어요
상위 삭제버튼을 눌렀을때 상위 + 하위까지 지우려는 방법이 어려워서 도움을 요청해요 ㅠㅠ
고수님들 도와주세요
답변 2개
</p>
<p>$(function() {
$(".remove-this").on("click", function(e) {
e.preventDefault();
if($(this).closest("tr").index() == 0) {
$(this).closest("table").find("tr").remove();
} else {
$(this).closest("tr").remove();
}
});
});</p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
상위에 삭제 버튼에 top_remove 로 class를 주시고
하위를 bottom_remove 로 주시면
jQuery(document).ready(function(){ jQuery("tr").on("click", ".top_remove", function(){ jQuery(this).latest("tr").nextAll("tr").remove();//하위테이블을 삭제 jQuery(this).latest("tr").remove(); //본인 tr 삭제 }); jQuery("tr").on("click", ".bottm_remove", function(){ jQuery(this).latest("tr").remove(); //본인 tr 삭제 }); });
기본을 이렇게 잡으시고 만약에 상위 테이블이 추가가 있다면 해당 상위하위 테이블에 동일한 클래스를 이용하시고 삭제 버튼에 data-val 로 동일한 클래스값을 넣어 주시면
jQuery(document).ready(function(){ jQuery("tr").on("click", ".top_remove", function(){ var cla=jQuery(this).data("val");//동일한 클래스를 찾는다 jQuery(this).latest("tr."+cla).nextAll("tr").remove();//동일한 클래스 값을 가지고 있는 하위테이블을 삭제 jQuery(this).latest("tr").remove(); //본인 tr 삭제 }); jQuery("tr").on("click", ".bottm_remove", function(){ jQuery(this).latest("tr").remove(); //본인 tr 삭제 }); });
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인