삭제 버튼을 눌렀을때 채크박스를 선택해서 빨간 박스안의 tr을 remove()하고 싶습니다.
빨간색 박스를 선택하려면 어떻게 해야 하나요?
Copy
<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개 / 댓글 4개
채택된 답변
+20 포인트
2017-03-10 (금) 15:28:46
Copy
<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 는 중복하시면 안됩니다.
2017-03-10 (금) 15:57:03
Copy
$(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("삭제할 항목 없음"); } });});답변에 대한 댓글 2개
2017-03-10 (금) 17:53:43
채택이 한분만 가능하네요
채택해드리지 못해 죄송합니다 .ㅠㅠ
채택해드리지 못해 죄송합니다 .ㅠㅠ
2017-03-10 (금) 15:07:34
이것만 2일째 잡고 있는데
Copy
<tr class="remove"> $('#테이블이름 tr .remove').click(function(){ $(this).parent().next().remove(); $(this).parent().remove();})이런식으로 하면 되나요
devdev
2017-03-10 (금) 14:53:37
삭제하려는 tr끼리 같은 class를 주세요.. 물론 출력할때부터 고려해야겠죠...
답변에 대한 댓글 2개
2017-03-10 (금) 15:02:24
현재 반복문으로
$("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를 주어서 고민해보겠습니다.
답변을 작성하려면 로그인이 필요합니다.