[9주차] 22. 여러개 동시 삭제를 위한 체크박스를 추가하고 동작기능 추가하기

이 게시글에서 가이드 해주는 부분

0. 맨 앞에 체크박스 추가

1. 맨 위의 체크박스로 전체선택, 전체선택해제 하는 기능

2. 여러개 선택된 행들의 primary key 값을 전달해 이들을 동시에 삭제하는 기능 

0. 맨 앞에 체크박스 추가

1) 맨 위의 체크박스 추가

2) 그 아래의 모든 체크박스 추가

* 위의 체크박스와 name 속성의 값이 다르다는 점에 유의하자.

* 여기서는 체크박스를 추가할 때, value 값으로 이 행을 식별할 수 있는 값을 넣어줘야 한다.(테이블의 primary key)

1. 맨 위의 체크박스로 전체선택, 전체선택해제 하는 기능

1) <table> 요소가 <form> 요소의 자식이 되도록 만들어줘하며, name과 action 속성을 추가.

2) 맨위의 체크박스에 onClick 속성을 추가하고 사용자 정의 함수 allCheck()를 아래와 같이 정의해줌
    (체크박스 요소에 접근하기 위해 1)의 작업은 해준 것이었음)

2. 여러개 선택된 행들의 primary key 값을 전달해 이들을 동시에 삭제하는 기능 

1) <input type="button" value="삭제" onClick="goToDelete()"> 버튼을 하단에 추가. 

    (이 부분은 <input type="submit" value="삭제" onClick="return goToDelete()"> 로 대체해도 무관할 듯
      단, 이 경우에는 해당 요소가 <form> 요소 안쪽에 위치 해야함)

 

2) goToDelete() 메소드 정의

- 하나도 선택되지 않은 상태로는 삭제 작업을 할 수 없도록 유효성 검사하는 부분을 포함함.

- submit 타입의 버튼 없이도 javascript 코드로 form의 action 으로 넘어가도록 할 수 있음.

- form의 action 속성으로 넘어갈 때 선택된 행의 식별값은 request 객체를 통해 전달되며
  체크박스였기 때문에 배열로 넘어간다는 점을 알고 있으면 된다.

3) <form> 요소의 action 속성으로 지정해준 jsp 파일에서 삭제할 번호 넘겨받아 삭제하기
     & DAO클래스에서 deleteSomeEmpl()메소드 추가하기