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

或者，您可以在最后一个col按钮事件处理程序中使用event.stopImmediatePropagation()。

$('#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

试试这个

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

Answer 4

我建议将<td>s paddinng改为0，使用某个类或simliar，并将<a>标签内置为display: block，以便浏览器只需点击整个<a>上的<td>-tag。

这里的优点是您的浏览器可以更好地处理链接，例如，如果需要，可以在新窗口中打开链接。

它可能不适合您的解决方案，但值得考虑类似的情况。

Answer 5

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

Answer 6

让我发布另一个例子，通过单击除特定列之外的任何列来选择/取消选择DataTables中的行。

$('#my_table_id tbody').on( 'click', 'td:not(.prohibited_td_class)', function() {
      $(this).closest("tr").toggleClass('selected');
      // If you are also using DataTables, see which rows you've selected.
      alert(""+table.rows('.selected').toJQuery()[0]);
});