jQuery：使整个表格行成为一个链接，除了一列答案

【问题标题】：jQuery: Making entire table row a link, apart from one columnjQuery：使整个表格行成为一个链接，除了一列
【发布时间】：2011-11-05 11:13:21
【问题描述】：

我有一个脚本可以使每个表格行都可点击（作为链接），但是我需要最后一列保持不变，因为该列作为“编辑”按钮。任何人都可以帮我修改脚本以使其正常工作吗？

到目前为止的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>
  .....

【问题讨论】：

见api.jquery.com/not-selector
只是迂腐：您的编辑链接缺少等号：href=
糟糕，感谢您的指正 :) 我已经更新了我的帖子

标签： jquery html-table clickable

【解决方案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;
         }              
      });
   });
});

【讨论】：

【解决方案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;
    }
});

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：

你用错了引号。应该是：$('#movies tr:not(".odd")') -- 你不是在这里跳过行而不是列吗？
我没有跳过行。我需要它适用于所有行，但不应该适用于最后一列

【解决方案4】：

我建议将 <td>s 填充为 0 并使用某个类或类似的，并将 <a> 内部的标签设为 display: block 以便浏览器只需点击 <a>-标签关于整个<td>。

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案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]);
});

【讨论】：