Question

我设法让我的表格中的行可以点击并链接到<a>元素的 href 属性。但是当我使选择器只选择除最后一列之外的行时，我开始遇到问题。

使用下面的代码，可点击的行仅对除了最后一个单元格之外的整行有效，这是我需要的，因为我在此单元格中有管理链接（链接以激活，编辑，删除等行）。唯一的问题是，无论您点击哪一行，它都会将您发送到最上一行的链接。我认为这与find('td a')的选择器有关，但我无法理解。

$('#dataTable tr td:not(:last-child)').click(function () {
    location.href = $('#dataTable tr').find('td a').attr('href');
});

悬停效果很好，只有当鼠标位于除最后一列之外的任何单元格上时才会更改指针。

$('#dataTable tr td:not(:last-child)').hover(
    function() { 
        $(this).css('cursor','pointer');
    },
    function() {
        $(this).css('cursor','auto');
    }
);

Answer 1

这是因为你正在获取表中的所有tr，然后将返回找到的第一个锚，尝试改变它：

$('#dataTable tr td:not(:last-child)').click(function ()    {
 location.href = $(this).parent().find('td a').attr('href');
});

这意味着它将点击的元素$（this）作为jquery对象，然后转到它的父对象。（行元素）。

Answer 2

$('#dataTable tr td:not(:last-child)').click(function ()    {
 location.href = $(this).parent().find('td a').attr('href'); 
});

我认为这应该有效。您的代码始终从您在dataTable中找到的第一个“td a”中获取href。此代码采用它在您要查找的特定td中找到的a。

Answer 3

替代答案。

HTML：

<table>
  <tbody>
    <tr data-href="#">
      <td>first</td>
      <td>second</td>
      <td>
        <div class="dropdown">...</div>
      </td>
    </tr>
  </tbody>
</table>

JS：

jQuery(document).ready(function ($) {
  $("tbody").on('click', 'tr td:not(:last-child)', function () {
    window.location = $(this).parent().data("href");
  });
});

jQuery：除最后一列外，使行可单击

3 个答案: