3

a hrefを検索し、行全体をクリック可能にするためのテーブルとこのコードがあります。

$(document).ready( function() {

        $('table tr').click(function() {
            var href = $(this).find("a").attr("href");
            if(href) {
                window.location = href;
            }
});

ただし、問題が1つあります。それは、右クリックで「新しいタブでリンクを開く」オプションやウィンドウなどが通常のahrefリンクのように表示されないことです。

テーブルの代わりにdivを使用することはオプションではありません。

それを修正する方法は？

私のためにそれを修正できるjQueryプラグインはありますか？

私のテーブルは次のようになります（tdが多いほど大きくなりますが、説明のためだけです）：

<table>
    <tr>
         <td>
             <a href="http://example.com">Some link</a>
             <span>Bla bla bla</span>
         </td>
         <td>
             <span>Some text</span>
         </td>
    </tr>
    <tr>
         <td>
             <a href="http://someotherlink.com">Some link</a>
             <span>Other text</span>
         </td>
         <td>
             <span>Something else</span>
         </td>
    </tr>
    <tr>
         ...
    </tr>
</table>

編集：現在のコードのように、ahref値を自動的に取得する必要があります：$（this）.find（ "a"）。attr（ "href"）;

編集2：私はtr全体をクリック可能にする必要があります（ブロックとして）。これは、上記の方法を使用して可能です。ただし、行をクリックして[新しいタブでリンクを開く]を選択することはできません。このオプションは、ahrefにカーソルを合わせた場合にのみ使用できます。しかし、私はそれが列全体にもある必要があります。したがって、ユーザーがマウスの中ボタンを使用して複数の新しいタブを開くか、右クリックしてコンテキストメニューから[新しいタブで開く]を選択する場合は、それを実行できます。現在、それは不可能です。

4

2 に答える 2

2

次のようなことを試してみませんか。

JS：

$(document).ready(function(){
    $("table tr").mousedown(function(e){

        document.oncontextmenu = function() {return false;}; 

        e.preventDefault();

        var href = $(this).find("a").attr("href");
        if( e.button == 2 ) {
            $(this).find('td:first').prepend('<div class="blank"><a href="' + href + '" target="_blank">Open in new window</a></div>').find('.blank').css('left',e.pageX + 'px').css('top',e.pageY + 'px').fadeIn(400);

        } else if(e.button === 0) {
            if(href) { 
                window.location = href;
            }
        } 
    });

    $(document).on('click','.blank a',function(){ 
        $(this).parent().fadeOut(400,function() { 
            $(this).remove(); 
        }); 
    }).on('mouseleave','.blank',function(){  
        $(this).fadeOut(400, function(){ 
            $(this).remove();     
        });     
    }); 

});

CSS：

.blank {
    display:block;
    padding:4px;
    background:#c3c3c3;
    position:absolute;
}

table tr td {
    overflow:visible;
    position:relative;
}

table tr {
    cursor:pointer;
}

これはjsfiddleですが、外観を定型化していないことに注意してください。左ボタンのクリックに関してjavascriptコードを更新する必要があります。

于 2012-08-08T06:03:41.407 に答える
0

これを試して

    $('tr th, tr td').wrapInner('<a href="http://example.com"></a>').children('a').click(function() {
   var href = $(this).attr("href"); if(href) { window.location = href; }
});

//問題がある場合はこれをdelegation試してください

    $('tr th, tr td').wrapInner('<a class="links" href="http://example.com"></a>');
$('body').delegate('a.links','click',function(e){
e.preventDefault();

   var href = $(this).attr("href"); if(href) { window.location = href; }
});
于 2012-08-08T05:24:15.607 に答える