如何从TD标签内的a元素获取href值？解决返回undefined问题

你的问题核心出在DOM加载顺序上！你把<script>标签放在了HTML表格的前面，当jQuery代码执行时，页面里的.clickable-row元素还没被浏览器渲染出来，找不到对应的a标签，自然就返回undefined了。

顺带提一句，你选择.clickable-row（这是td的class）的逻辑本身没问题，但前提是目标元素已经存在于DOM中才行。

两种修复方案 #

1. 把script标签移到HTML内容末尾

这样能确保执行jQuery代码前，所有DOM元素都加载完成：

<table>
  <tbody>
    <tr class="userListResult">
      <td class="clickable-row"><a href="/Admin/Log/Profile/">abc</a></td>
    </tr>
  </tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  console.log($(".clickable-row").find("a").attr("href"));
</script>

2. 用$(document).ready()包裹代码

这个方法会等待整个DOM加载完成后再执行内部代码，不管script标签放在哪个位置都有效：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    console.log($(".clickable-row").find("a").attr("href"));
  });
</script>
<table>
  <tbody>
    <tr class="userListResult">
      <td class="clickable-row"><a href="/Admin/Log/Profile/">abc</a></td>
    </tr>
  </tbody>
</table>

额外小优化 #

你还可以简化选择器，直接定位到目标a标签：

console.log($(".clickable-row a").attr("href"));

这样修改后，就能正确输出你预期的/Admin/Log/Profile/啦！

内容的提问来源于stack exchange，提问作者Gustavo Filgueiras