- prop :지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가
- 어제꺼 복습
- 선택삭제
1. 전체체크 해제시 체크해제
2. 삭제버튼 눌렀을 때 1번데이터가 삭제되엇습니다
3. 체크안된 상태에서 삭제누르면 알림창
4. 선택한 애들만 삭제
- 선택삭제 1번방법 nextAll() //each(function() { ... }) 사용
- nextAll() : 현재 요소의 다음에 위치한 모든 형제 요소를 선택하는 역할을 합니다.
- getAll.each(function() { ... });: rows에 포함된 각 행에 대해 반복문을 실행합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.0.js"></script>
</head>
<body>
<table border="1">
<tr>
<th><input type="checkbox" id="chkall"></th>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th><input type="button" value="선택삭제" class="chooseDel"></th>
</tr>
<tr>
<td><input type="checkbox" class="chk"></td>
<td>1</td>
<td>안녕하세요</td>
<td>user01</td>
<td><input type="button" value="삭제" class="delBtn"></td>
</tr>
<tr>
<td><input type="checkbox" class="chk"></td>
<td>2</td>
<td>반가워요</td>
<td id="c2">user02</td>
<td><input type="button" value="삭제" class="delBtn"></td>
</tr>
<tr>
<td><input type="checkbox" class="chk"></td>
<td>3</td>
<td>반가워요</td>
<td id="c3">user03</td>
<td><input type="button" value="삭제" class="delBtn"></td>
</tr>
</table>
<!-- 1. 전체체크 해제시 체크해제
2. 삭제버튼 눌렀을 때 1번데이터가 삭제되엇습니다
3. 체크안된 상태에서 삭제누르면 알림창
4. 선택한 애들만 삭제 -->
<script>
$("#chkall").click(function() {
if($(".chk").prop("checked") == true) {
$(".chk").prop("checked", false);
}else {
$(".chk").prop("checked", true);
}
});
$("tr").click(function() {
if(event.target.className =="delBtn") {
if($(event.target).closest("tr").find(".chk").prop("checked") ==true) {
$(event.target).closest("tr").remove();
}else {
alert("체크필요");
}
}else if(event.target.className =="chooseDel"){
// 1번방법
// nextAll() : 현재 요소의 다음에 위치한 모든 형제 요소를 선택하는 역할을 합니다.
let getAll = $(".chooseDel").closest("tr").nextAll();
console.log(getAll);
// getAll.each(function() { ... });: getAll에 포함된 각 행에 대해 반복문을 실행합니다.
getAll.each(function() {
if($(this).closest("tr").find(".chk").prop("checked") == true) {
$(this).closest("tr").remove();
}
});
//2번방법
// let removeArr =[];
// for(let i =0; i<$(".chk").length; i++) {
// if($($(".chk")[i]).prop("checked")) {
// removeArr[i] = $($(".chk")[i]).closest("tr");
// }
// }
// for(let i =0; i<removeArr.length; i++) {
// $(removeArr[i]).remove();
// }
}else {
return;
}
});
</script>
</body>
</html>- 선택삭제 2번방법 인덱스 + 배열사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.7.0.js"></script>
</head>
<body>
<table border="1">
<tr>
<th><input type="checkbox" id="chkall"></th>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th><input type="button" value="선택삭제" class="chooseDel"></th>
</tr>
<tr>
<td><input type="checkbox" class="chk"></td>
<td>1</td>
<td>안녕하세요</td>
<td>user01</td>
<td><input type="button" value="삭제" class="delBtn"></td>
</tr>
<tr>
<td><input type="checkbox" class="chk"></td>
<td>2</td>
<td>반가워요</td>
<td id="c2">user02</td>
<td><input type="button" value="삭제" class="delBtn"></td>
</tr>
<tr>
<td><input type="checkbox" class="chk"></td>
<td>3</td>
<td>반가워요</td>
<td id="c3">user03</td>
<td><input type="button" value="삭제" class="delBtn"></td>
</tr>
</table>
<!-- 1. 전체체크 해제시 체크해제
2. 삭제버튼 눌렀을 때 1번데이터가 삭제되엇습니다
3. 체크안된 상태에서 삭제누르면 알림창
4. 선택한 애들만 삭제 -->
<script>
$("#chkall").click(function() {
if($(".chk").prop("checked") == true) {
$(".chk").prop("checked", false);
}else {
$(".chk").prop("checked", true);
}
});
$("tr").click(function() {
if(event.target.className =="delBtn") {
if($(event.target).closest("tr").find(".chk").prop("checked") ==true) {
$(event.target).closest("tr").remove();
}else {
alert("체크필요");
}
}else if(event.target.className =="chooseDel"){
// 1번방법
// // nextAll() : 현재 요소의 다음에 위치한 모든 형제 요소를 선택하는 역할을 합니다.
// let getAll = $(".chooseDel").closest("tr").nextAll();
// console.log(getAll);
// // getAll.each(function() { ... });: getAll에 포함된 각 행에 대해 반복문을 실행합니다.
// getAll.each(function() {
// if($(this).closest("tr").find(".chk").prop("checked") == true) {
// $(this).closest("tr").remove();
// }
// });
//2번방법
let removeArr =[];
for(let i =0; i<$(".chk").length; i++) {
if($($(".chk")[i]).prop("checked")) {
removeArr[i] = $($(".chk")[i]).closest("tr");
}
}
for(let i =0; i<removeArr.length; i++) {
$(removeArr[i]).remove();
}
}else {
return;
}
});
</script>
</body>
</html>
