jquery 테이블 rowspan tr 삭제 질문입니다.
본문
삭제 버튼을 눌렀을때 채크박스를 선택해서 빨간 박스안의 tr을 remove()하고 싶습니다.
빨간색 박스를 선택하려면 어떻게 해야 하나요?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<button id="delete">삭제</button>
<table>
<tr>
<th>lesson</th>
<th>class</th>
<th>absent</th>
<th>substitute</th>
</tr>
<tr>
<td rowspan="2"><input type="checkbox" id="cbx" name="cbx"/></td>
<td>1b</td>
<td>John</td>
<td>Max</td>
</tr>
<tr>
<td>3a</td>
<td>Bev</td>
<td>Abbi</td>
</tr>
<tr>
<td rowspan="2"><input type="checkbox" id="cbx" name="cbx"/></td>
<td>1b</td>
<td>John</td>
<td>Max</td>
</tr>
<tr>
<td>3a</td>
<td>Bev</td>
<td>Abbi</td>
</tr>
</table>
</body>
</html>
답변 4
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){
$("#delete").click(function(){
$("input[name=cbx]:checked").each(function(){
$(this).parent().parent().next().remove();
$(this).parent().parent().remove();
});
})
});
</script>
<button id="delete">삭제</button>
<table>
<tr>
<th>lesson</th>
<th>class</th>
<th>absent</th>
<th>substitute</th>
</tr>
<tr>
<td rowspan="2"><input type="checkbox" name="cbx"/></td>
<td>1b</td>
<td>John</td>
<td>Max</td>
</tr>
<tr>
<td>3a</td>
<td>Bev</td>
<td>Abbi</td>
</tr>
<tr>
<td rowspan="2"><input type="checkbox" name="cbx"/></td>
<td>1b</td>
<td>John</td>
<td>Max</td>
</tr>
<tr>
<td>3a</td>
<td>Bev</td>
<td>Abbi</td>
</tr>
</table>
</body>
</html>
</script>
id="cbx" 는 제거해주세요. ID 는 중복하시면 안됩니다.
$(function() {
$("#delete").on("click", function() {
var chk = $("input[name='cbx']:checked").length;
if(chk > 0) {
$("input[name='cbx']:checked").each(function() {
$(this).closest("tr").next().remove();
$(this).closest("tr").remove();
});
} else {
alert("삭제할 항목 없음");
}
});
});
아주잘되네요 감사합니다.
채택이 한분만 가능하네요
채택해드리지 못해 죄송합니다 .ㅠㅠ
삭제하려는 tr끼리 같은 class를 주세요.. 물론 출력할때부터 고려해야겠죠...
현재 반복문으로
$("input[name=cbx]").eq(i).is(":checked")으로 조건을 걸어서
참이면
$(this).parent("tr").remove();
이렇게 구현했는데
<td>두줄과 rowspan 된 td도 삭제되어야 하는데
한줄만 삭제되거나 그러네요
tr에 class를 주어서 고민해보겠습니다.
답변감사드립니다.
이것만 2일째 잡고 있는데
<tr class="remove">
$('#테이블이름 tr .remove').click(function(){
$(this).parent().next().remove();
$(this).parent().remove();
})
이런식으로 하면 되나요
답변을 작성하시기 전에 로그인 해주세요.
