HTML 테이블 태그에 링크를 넣는 방법

2021년에 올라온 글에서 아직도 HTML은 테이블에 링크를 넣는 깔끔한 방법이 없다고 한다.

엄청나게 많은 방법이 있는데 본인이 보기에 가장 괜찮은 방법을 고름.

 

<tr th:each="order : ${orders}" style="cursor:pointer;" th:onclick="|goToOrderDetail('${order.id}');|">

<script>
    function goToOrderDetail(id) {
        window.location.href="/me/order/detail/" + id;
    }
</script>

 

1.onclick을 건다.

2.onclick으로 실행되는 함수를 location을 바꾸게 한다.

3.링크가 아니므로 커서가 바뀌지 않으므로 style을 주어 링크인 것처럼 보이게 한다.