foreach로 받은 리스트의 고유 값 선택해 넘겨줘야 할 때(dataset 활용)

<c:forEach var="book" items="${board}" varStatus="status">
    <tr data-uuid="${book.bookUuid}">
        <td style="text-align: center;"><a href="/view/${book.bookUuid}">${book.title}</a></td>
        <td style="text-align: center;">${book.memberId}</td>
        <td style="text-align: center;">${book.count}</td>
        <td style="text-align: center;">${book.readNum}</td>
        <td style="text-align: center;"><a href="/editBook/${book.bookUuid}">Modify</a></td>
        <td style="text-align: center;"><a href="#" onclick="del(this);">Delete</a></td>
    </tr>
</c:forEach>

- 속성값이 고유해야할때 data-id를 쓴다.

- 여러개를 사용할수도 있다.

- input hidden태그 대신 사용하기도 한다.

 

예를 들어, 게시판 목록중에 삭제 컬럼이 있다고 하자.

삭제버튼을 누르면 foreach로 가져온 리스트중에서 x번째에 해당하는 것을 선택해야하는데, 어떻게 선택해야하는가?

그건 dataset을 이용하면 된다.

tr에다 data-id 속성을 주고 value를 고유값으로 주면 각 행의 고유값을 가져올수 있다.

이렇게 가져온 고유값을 서버에 보낼때는 Ajax를 이용한다.

그래서 버튼을 눌렀을때, ajax로 통신해 선택된 고유값을 서버에 보내고 해당하는 uuid를 찾아 삭제 메소드를 실행시키면 삭제가 완료되는 플로우이다.

버튼을 클릭했을때, uuid를 가져오는 방법은 이렇게 구현한다.

function del(obj){
    let bookUuid = obj.parentElement.parentElement.dataset.uuid;

    $.ajax({
        type: "POST",
        url: "/book/delete",
        data: bookUuid,

        ....

        })

        생략
}

함수를 실행시키는 곳이 a 태그 이므로 a=obj가 된다.

obj의 parentElement는 td 태그이며, 이 td태그의 parentElement인 tr태그의 dataset의 uuid라는 id의 속성을 선택하라는 뜻이다.

 

처음에 리스트에서 특정 행을 선택하는 방법을 몰라서 많이 헤맸다.

도움이 되길 바라며 정리해본다.