javascript - 单击表行时如何从单元格获取值

我试图从类editlink的单元格中获取href值。这是我尝试过的方法，但是我在undefined中得到了alert。

<table id="table_1">
  <thead></thead>
  <tbody>
    <tr>
      <td>sometext</td>
      <td class="editlink"><a href="/linkid444">edit</a></td>
    </tr>
    <tr>
      <td>sometext2</td>
      <td class="editlink"><a href="/linkid555">edit</a></td>
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>

$(document).ready(function() {
  $("#table_1").delegate("tr", "click", function() {
    var linkdata = $(this).closest('tr').find('.editlink').attr("href");
    alert(linkdata);
  });
});

最佳答案

首先请注意delegate()已被弃用。而是使用on()方法的委托(delegate)签名。这也可能意味着您需要升级正在使用的jQuery版本。

至于您遇到的问题，是因为.editlink是td。 href属性位于a元素上，因此选择器必须为.editlink a。另外，closest('tr')是多余的，因为事件处理程序已经绑定(bind)到tr。试试这个:

$(document).ready(function() {
  $("#table_1").on('click', "tr", function() {
    var linkdata = $(this).find('.editlink a').attr("href");
    console.log(linkdata);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_1">
  <thead></thead>
  <tbody>
    <tr>
      <td>sometext</td>
      <td class="editlink"><a href="/linkid444">edit</a></td>
    </tr>
    <tr>
      <td>sometext2</td>
      <td class="editlink"><a href="/linkid555">edit</a></td>
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>