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()。

$('#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>的paddinng改为0，使用某个类或simliar，并将<a>标记放在display: block内，以便浏览器只需点击整个<a>上的<td> - 代码。

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

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

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]);
});

jQuery：除了一列之外，使整个表行成为一个链接

6 个答案: