시뮬레이션 동작은

Question

내가 좋아하는 뭔가가있다.

지금 나는 다음과 같은 코드를 사용합니다

$(function() { 
    $('tr').each(function() { 
     var tr = $(this); 
     if (tr.hasClass('no-row-link')) return; 
     var links = $('a', tr); 
     if (links.length != 1) return; 
     tr.addClass('row-link').click(rowLinkClick); 
    }); 

    function rowLinkClick() { 
     var tr = $(this); 
     var links = $('a', tr); 
     if (links.length != 1) return; 
     window.location = links.attr('href'); 
    } 
}); 

을하지만 문제는,이 동작은 아주 좋은 작동하지 않습니다. 사용자는 새 탭에서 페이지를 열려면 일반 링크를 command-click 할 수 있지만 여기서는 사용할 수 없습니다. 사용자는 일반 링크를 마우스 오른쪽 버튼으로 클릭하여 링크 상황에 맞는 메뉴를 볼 수 있지만 여기에는 연결할 수 없습니다.

내가 원하는 것을 할 수있는 유일한 방법은 표 셀을 던져서 (th/td) 링크에 내용을 래핑하는 것입니다. 그런 다음 해당 링크가 display : block으로 작동하도록 만듭니다. 이것은 아주 우아한 해결책이 아닙니다. 거기에 다른 해결책이 있습니까?

Answer 1

행에 데이터 속성을 사용하는 것은 어떻습니까? jQuery를에 그런

<tr data-href="yourlinkhere"><!--whatever comes here--></tr> 

:

그것은 확실히 더 우아한 모습

$('.table-selector').on('click', 'tr', function(){ 
    var href = $(this).data('href'); 

    if (href){ 
     window.location = href; 
    } 
}); 

, 당신은 생각하지 않아? ^^

UPDATE : 아, 마우스 오른쪽 버튼으로 클릭 동작 ... KK

tr { position: relative; } 
tr a { position: absolute; display: block; width: 100%; height: 30px/*or something*/ } 

CSS 솔루션, 테이블의 유연성 확실하지만, 가능하면 ... 여기 방법에 DEMO 아니에요 나는 그것을 시도 할 것이다.

Answer 2

당신은 e.ctrlKey 속성을 확인할 수 있으며, 하나 window.navigate 또는 이에 따라 window.open 사용

$(function() { 
    function rowLinkClick(e) { 
     var href = $(this).find('a').attr('href'); 
     if (href) { 
      (e.ctrlKey ? window.open : window.navigate)(href); 
     } 
    } 

    $('tr') 
     .not('.no-row-link') 
     .has('a') 
     .addClass('row-link') 
     .click(rowLinkClick); 
}); 

그리고 당신은 링크와 같은 마우스 커서 보여주기 위해 CSS를 사용할 수 있습니다

.row-link { 
    cursor: pointer; 
} 

http://jsfiddle.net/zmr6whjh/2/

을

링크를 마우스 오른쪽 버튼으로 클릭하면 링크의 상황에 맞는 메뉴가 약간 표시 될 수 있다고 생각합니다. 나는 그것을 할 수있는 합리적인 방법이 있는지 확신하지 못합니다.