Нажмите "Целая строка" (сохраняя средний клик и Ctrl + клик)

Ответ 1

К сожалению, нет способа смоделировать ссылку и все связанные с ними поведение в каждом браузере. Таким образом, единственный способ достичь того, что вы хотите, это иметь ссылку, которая следует за курсором вокруг элемента <tr>; эта ссылка была бы невидимой, поэтому пользователю, похоже, они нажимают на <tr>, но на самом деле они нажимают на скрытую ссылку. Используя этот метод, средняя кнопка, ctrl + click и любое другое поведение остаются нетронутыми!

Здесь DEMO: http://jsbin.com/ufugo

И вот код:

$("table tr").each(function(){

    var $link = $('a:first', this).clone(true),
        dim = {
            x: [
                $(this).offset().left,
                $(this).offset().left + $(this).outerWidth()
            ],
            y: [
                $(this).offset().top,
                $(this).offset().top + $(this).outerHeight()
            ]
        }

    $link
        .click(function(){
            $(this).blur();
        })
        .css({
            position: 'absolute',
            display: 'none',
            // Opacity:0  means it invisible
            opacity: 0
        })
        .appendTo('body');

    $(this).mouseover(function(){
        $link.show();
    });

    $(document).mousemove(function(e){
        var y = e.pageY,
            x = e.pageX;
        // Check to see if cursor is outside of <tr>
        // If it is then hide the cloned link (display:none;)
        if (x < dim.x[0] || x > dim.x[1] || y < dim.y[0] || y > dim.y[1]) {  
            return $link.hide();
        }
        $link.css({
            top: e.pageY - 5,
            left: e.pageX - 5
        })
    });

});

EDIT:

Я создал плагин jQuery, используя немного лучше aproach, чем выше: http://james.padolsey.com/javascript/table-rows-as-clickable-anchors/

Ответ 2

ИЗМЕНИТЬ

Это простая проблема, которая имеет простое решение. Я не вижу необходимости в неприятных хаках, которые могут сломаться на некоторых браузерах или принять время обработки. Тем более, что существует четкое и простое решение CSS.

Сначала вот demo

Вдохновленный @Nick решением для очень похожей проблемы, я предлагаю простое решение css + jquery.

Во-первых, вот мини-плагин, который я написал. Плагин будет обертывать каждую ячейку ссылкой:

jQuery.fn.linker = function(selector) {
    $(this).each(function() {
        var href = $(selector, this).attr('href');
        if (href) {
            var link = $('<a href="' + $(selector, this).attr('href') + '"></a>').css({
                'text-decoration': 'none',
                'display': 'block',
                'padding': '0px',
                'color': $(this).css('color')
            })
            $(this).children()
                   .css('padding', '0')
                   .wrapInner(link);
        }
    });
};

И вот пример использования:

$('table.collection tr').linker('a:first');

И все необходимые вам CSS:

table.collection {
    border-collapse:collapse;
}

Это так просто.

Вы можете использовать объект события, чтобы проверить тип щелчка мыши. В этой статье обсуждается аналогичная проблема.

В любом случае, вот как это сделать:

$("table#row_link tbody tr").click(function () {

    if((!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1)){
        if (!e.ctrlKey) {
            // Left mouse button was clicked without ctrl
            window.location = $(this).find("a:first").attr("href");
        }
    }
});

Ответ 3

Вы хотите:

$('table#row_link tbody tr').mousedown( function(e){
    if(e.ctrlKey || (!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 4)){
        //middle mouse button or ctrl+click
    } else {
        //normal left click
    }
});

Это проверено в FF3.0.10, Chrome 1.0 и IE6. Я использую событие mousedown, потому что ни firefox, ни IE не пропускают среднюю кнопку мыши на событие .click(fn).

Ответ 4

Я бы атаковал это со стороны HTML/css. Это было обычной проблемой, когда большинство сайтов делали все макеты в таблицах.

Сначала сделайте содержимое всех ячеек таблицы в ссылках. Если вы не хотите, чтобы они выглядели как ссылки, вы можете использовать CSS для удаления подчеркивания из ячеек "non link". Но они будут ссылками, которые семантически хотят, что вы хотите.

Затем вы хотите, чтобы ссылка расширялась, чтобы заполнить всю ячейку. StackOverflow уже знает ответ на этот вопрос:

td a { display: block; width: 100%; height: 100%; line-height: 100%; }

С типичной таблицей без пробелов между ячейками вся строка будет доступна для кликов. И поскольку это зависит от каких-либо трюков или конкретных браузеров, они должны работать везде.

Ответ 5

Вы можете захватить событие и посмотреть его код события. Но нет реального способа узнать, что такое поведение браузера для этих событий.

Ответ 6

Здесь что-то должно работать: вместо того, чтобы использовать window.location, мы .click(), чтобы эмулировать щелчок по первому внутри элемента. Кроме того, используйте условное обозначение для CTRL + Click.

Должно выглядеть так:

$("table#row_link tbody tr").click(function (e) {
    if(e.ctrlKey) { 
        // Run Ctl+Click Code Here
    } else { 
        $(this).children('a').eq(0).click(); 
    }
}

Надеюсь, это поможет!

Дэйв Ромеро

Ответ 7

Вы можете сделать ссылку и позволить ей перемещаться по tr, ожидая события mouveover, обновить href и позицию

создать одну пиксельную ссылку

<table id="row_link">....</table>
<a id="onepixel" style="position:absolute;z-index:1000;width:1px;height:1px;"></a>

обновить href и положение мыши над

$("#row_link tr").mouseover(
   function(event){
      //update href
      $("#onepixel").attr("href",$(this).find("a:first").attr("href"));
      //update position, just move to current mouse position
      $("#onepixel").css("top",event.pageY).css("left",event.pageX);
   }
);

Ответ 8

Попробуйте помещать a вокруг td, а затем примените отображение: заблокируйте элемент CSS в td.

Это должно сделать всю область td кликабельной, со всеми кнопками как "нормальную" ссылку.

Пример, вероятно, лучше:

<table id="row_link"> 
  <tbody> 
    <tr>
      <a href="link1.html"><td style="display: block;">link</td></a> 
      <td>info 1</td> 
    </tr>       
    <tr>
      <a href="link2.html"><td style="display: block;">link</td></a>
      <td>info 2</td> 
    </tr>       
  </tbody> 
</table>

Аналогичный подход сработал в прошлом для меня, хотя это не было точно для элементов таблицы. Непроверенный с таблицами, попробуйте.

Ответ 9

Я думаю, что плагин большей ссылки будет делать то, о чем вы просите. Здесь

• статья и
• демо.

Ответ 10

вам нужно удалить <tbody>

и просто используйте атрибут "href", чтобы получить ссылку, и не хотите выбирать привязку <a> , потому что thats содержит атрибут href.

$("table#row_link tbody tr a").click(function () {

     window.location = $(this).attr("href");

});

или просто заставьте ссылку открыть новую вкладку.

Надеюсь, это поможет вам.