때때로 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');
});

 

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile
    좋은팁 감사합니다.
    일단 스크랩
  • ?
    감사합니다. 저도 스크랩! ㅎㅎ