jQuery: сделать всю строку таблицы ссылкой, кроме одного столбца

Question

У меня есть скрипт, который может сделать каждую строку таблицы кликабельной (как ссылку), однако мне нужно, чтобы последний столбец оставался нетронутым, как этот столбец как кнопка «Изменить».Может ли кто-нибудь помочь мне изменить скрипт, чтобы он работал?

Вот этот jQuery:

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

Вот HTML-код для одной строки:

<table id="movies">
  <tr class='odd'>
    <td>1</td>
    <td><a href='/film.php?id=1'></a>Tintin</td>
    <td>Tintin and Captain Haddock set off on a treasure hunt for a sunken ship.</td>
    <td><a href='/edit.php?id=1'>edit</a></td>
  </tr>
  .....

Answer 1

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

$(document).ready(function()
{
   $('#movies tr').each(function(i,e)
   {
      $(e).children('td:not(:last)').click(function()
      {
         //here we are working on a td element, that's why we need
         //to refer to its parent (tr) in order to find the <a> element
         var href = $(this).closest("tr").find("a").attr("href");
         if(href)
         {
            window.location = href;
         }              
      });
   });
});

Answer 2

альтернативно, вы можете использовать event.stopImmediatePropagation() в обработчике событий последней кнопки col.

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

$('#movies input:button').click(function (e) {
    // button's stuff
    e.stopImmediatePropagation();
});

преимущество (или неудобство) состоит в том, что вы можете нажимать вокруг кнопки в последней ячейке.(в отступе поля).Я могу быть неудобным, так как нажатие кнопки пропуска откроет связанную страницу и удивит пользователя.

Другой альтернативой может быть использование только одного обработчика событий, который решает, какое действие делать с event.which.Это мой любимый метод, так как он ограничивает количество обработчиков событий.использование делегата по той же причине.Один обработчик за таблицей, а не один за строкой.

$('#movies').delegate('tr', 'click', function (e) {
    if ( $(e.target).is('input:button') )  {
        // button's stuff
    }
    else {
        var href = $(this).find("a").attr("href");
        if(href) window.location = href;
    }
});

Answer 3

Позвольте мне опубликовать другой пример для выбора / отмены выбора строк в DataTables , нажав на любой столбец, кроме определенного.

Answer 4

$('tr').each(function () {
    $(this).children('td:not(:first)').click(function () {
        window.location = $(this).closest('tr').data('href');
        return false;
    });
});

Answer 5

Я бы предложил вместо этого иметь <td> s paddinng к 0 с определенным классом или симлиаром, а внутри теги <a> быть display: block, чтобы браузер просто нажимал на тег <a> на все <td>.

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

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

Answer 6

Попробуйте это

$(document).ready(function() {
  $('#movies tr:not('.odd')').click(function() {
    var href = $(this).find("a").attr("href");
    if(href) {
      window.location = href;
    }
  });
});