때때로 tr 태그 전체에 링크를 걸고 싶을 때가 있습니다.
모바일에서 클릭을 원활하게 싶어서라든가 등등의 이유로요.
그럴 때 두 가지 방법이 있는데 각각 장단점이 있어서 고민이 생깁니다.
1. 첫 번째 방법
- tr 태그에 onclick 속성 등을 줘서 location.href 등으로 넘겨줍니다.
=> 근데 이렇게 하면 a태그를 성애하는 검색봇한테 외면 받기 십상이라는군요;;;
2. 두 번째 방법
- tr 태그 하위의 모든 td 태그들에 a태그를 심어놓고 display: block; width: 100%; height: 100% 등의 스타일을 줍니다.
=> 근데 이렇게 하면 귀찮은 건 기본이고 나중에 소스 수정할 때도 '아, 더럽다'라는 생각이 들게 됩니다;;;
그럼 어떻게 하냐 하면,
- 간단한 스크립트면 됩니다. 제목에 걸려 있는 a태그의 href값을 tr 태그 클릭 이벤트로 옮겨주면 되죠.
$('table tr td').not('.check').on('click', function() { location.href = $(this).siblings('.title').children('a').attr('href'); return false; });
(2행에 있는 .title은 문서 제목으로 이뤄진 테이블 셀을 의미하는 것이겠죠? ㅎ)
- 아무튼 이런 식으로 하면 tr 태그 전체에 링크를 거는 효과를 내면서도 검색봇한테 미움도 안 받게 된다고 합니다.
- [참고] 여기서 1행의 .not('.check')는 리스트에서 게시물 관리를 위한 체크박스를 의미합니다. 체크박스 클릭했는데 링크 넘어가면 곤란하잖아요? 그래서 얘만 제외시킨 겁니다. 만약 이 부분이 필요 없다면
$('table tbody tr').on('click', function() { location.href = $(this).children('.title').children('a').attr('href'); return false; });
으로 바꾸셔도 될 겁니다.
...
...
...
- 그런데 만약 제목 부분을 목록 설정에서 제외했다면? 그래서 링크를 취득할 수 없다면? ...... 이렇게 해보세요.
- tr 태그 아래, 그리고 첫 번째 td 태그 앞에 a 태그를 만들어줍니다. XE 게시판 스킨식으로 하면 이렇게 되겠죠.
<tr loop="$document_list=> $no, $document"> <a href="{getUrl('document_srl', $document->document_srl, 'listStyle', $listStyle, 'cpage', '')}"></a> <block loop="$list_config => $key, $val">
- 이렇게 하면 확인 결과 (크롬과 IE 11 이상에선 ) a태그들이 신기하게도 table 앞으로 헤쳐 모여 하게 됩니다. 왜 그런지는 모르겠으나 그렇게 몰아주더군요. 대강 아래와 같이 나옵니다.
<div> <a href="/index/274"></a> <a href="/index/270"></a> <a href="/index/254"></a> <a href="/index/251"></a> <a href="/index/249"></a> <a href="/index/248"></a> <a href="/index/244"></a> <a href="/index/150"></a> <table width="100%" border="1" cellspacing="0"> <thead> .......
- 이제 스크립트로 링크와 tr 태그를 연결시켜주면 됩니다. 저는 이렇게 했어요.
// link var tr_a = $('table').siblings('a'); $('table tr td').not('.check').on('click', function(e) { e.preventDefault(); var i = $(this).parent().index(); location.href = tr_a.eq(i).attr('href'); });
일단 스크랩