jquery 테이블 rowspan tr 삭제 질문입니다. 채택완료
선구자
8년 전
조회 9,628
삭제 버튼을 눌렀을때 채크박스를 선택해서 빨간 박스안의 tr을 remove()하고 싶습니다.
빨간색 박스를 선택하려면 어떻게 해야 하나요?
</p><p><html></p><p><head></p><p> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /></p><p></head></p><p><body></p><p><button id="delete">삭제</button></p><p> </p><p> <table></p><p> <tr></p><p> <th>lesson</th></p><p> <th>class</th></p><p> <th>absent</th></p><p> <th>substitute</th></p><p> </tr></p><p> <tr></p><p> <td rowspan="2"><input type="checkbox" id="cbx" name="cbx"/></td></p><p> <td>1b</td></p><p> <td>John</td></p><p> <td>Max</td></p><p> </tr></p><p> <tr></p><p> <td>3a</td></p><p> <td>Bev</td></p><p> <td>Abbi</td></p><p> </tr></p><p> <tr></p><p> <td rowspan="2"><input type="checkbox" id="cbx" name="cbx"/></td></p><p> <td>1b</td></p><p> <td>John</td></p><p> <td>Max</td></p><p> </tr></p><p> <tr></p><p> <td>3a</td></p><p> <td>Bev</td></p><p> <td>Abbi</td></p><p> </tr></p><p> </table></p><p></body></p><p></html></p><p>
댓글을 작성하려면 로그인이 필요합니다.
답변 4개
채택된 답변
+20 포인트
8년 전
</p><p><code class="plain"><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>
</code><code class="plain"></code>
</script> </p><p>
id="cbx" 는 제거해주세요. ID 는 중복하시면 안됩니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
8년 전
</p><p>$(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("삭제할 항목 없음");
}
});
});</p><p>http://nyaongii.dothome.co.kr/temp/wrid_172910.html">http://nyaongii.dothome.co.kr/temp/wrid_172910.html
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
선구자
8년 전
아주잘되네요 감사합니다.
�
선구자
8년 전
채택이 한분만 가능하네요
채택해드리지 못해 죄송합니다 .ㅠㅠ
채택해드리지 못해 죄송합니다 .ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
8년 전
이것만 2일째 잡고 있는데
</p><p> </p><p><tr class="remove"></p><p> </p><p>$('#테이블이름 tr .remove').click(function(){</p><p> $(this).parent().next().remove();</p><p> $(this).parent().remove();</p><p>})</p><p> </p><p>
이런식으로 하면 되나요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 2개
�
선구자
8년 전
현재 반복문으로
$("input[name=cbx]").eq(i).is(":checked")으로 조건을 걸어서
참이면
$(this).parent("tr").remove();
이렇게 구현했는데
<td>두줄과 rowspan 된 td도 삭제되어야 하는데
한줄만 삭제되거나 그러네요
tr에 class를 주어서 고민해보겠습니다.
$("input[name=cbx]").eq(i).is(":checked")으로 조건을 걸어서
참이면
$(this).parent("tr").remove();
이렇게 구현했는데
<td>두줄과 rowspan 된 td도 삭제되어야 하는데
한줄만 삭제되거나 그러네요
tr에 class를 주어서 고민해보겠습니다.
�
선구자
8년 전
답변감사드립니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인