7

テーブルの行をクリック可能にして、要素のhref属性にリンクすることができました。<a>ただし、セレクターで最後の列以外の行のみを選択するようにすると、問題が発生し始めました。

以下のコードでは、クリック可能な行は、このセルに管理リンク（行をアクティブ化、編集、削除などするためのリンク）があるため、必要な最後のセルを除く行全体でのみアクティブになります。唯一の問題は、どの行をクリックしても、一番上の行のリンクに移動することです。これは私のセレクターと関係があると思いますが、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');
    }
);
4

3 に答える 3

11

これは、テーブル内のすべてのtrを取得しているため、最初に見つかったアンカーが返されるため、次のように変更してみてください。

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

つまり、クリックされた要素$（this）をjqueryオブジェクトとして取得し、その親に移動します。（行要素）。

于 2011-09-23T06:36:44.100 に答える
1 
$('#dataTable tr td:not(:last-child)').click(function ()    {
 location.href = $(this).parent().find('td a').attr('href'); 
});

これでうまくいくと思います。コードは常に、dataTable内で最初に見つかった「tda」からhrefを取得します。このコードは、探している特定のtdで見つかったものを取得します。

于 2011-09-23T06:37:32.197 に答える
0

別の答え。

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");
  });
});
于 2020-03-17T06:56:09.883 に答える