动态表格TD父元素获取报错，如何获取上方行数据？

错误原因 #

你遇到的$(this).parent不是已定义函数错误，大概率是因为动态拼接HTML时使用了HTML实体（</>），导致生成的不是<tr>/<td>DOM元素，而是纯文本节点，最终绑定事件的元素不符合预期。另外原代码逻辑也没实现“获取上方行文本”的需求。

修正后的代码 #

JavaScript 部分 #

$("#MyTable").on('click', '.MakeNewTableRow', function() {
  var thisRow = $(this).closest("tr");
  // 直接使用HTML标签，无需实体转义
  thisRow.after("<tr><td>click me</td></tr>");
  thisRow.next().find("td:first").addClass('ShowTheTDValue');
});

$("#MyTable").on('click', '.ShowTheTDValue', function() {
  // 获取当前点击元素所在行的上一行，提取目标文本
  var upperRowText = $(this).closest("tr").prev().find("td:first").text();
  alert(upperRowText);
});

HTML 部分 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='MyTable'>
  <tr>
    <td class='MakeNewTableRow'>whatever</td>
  </tr>
</table>

关键说明 #

• 修正HTML拼接逻辑：JavaScript中拼接HTML结构时，直接写<tr>而非<tr>，否则浏览器会把实体字符当成纯文本渲染，无法生成正确的DOM元素。
• 获取上方行文本：通过$(this).closest("tr")定位当前点击元素所在的行，再用prev()获取它的上一行，最后通过find("td:first").text()提取目标行的文本内容。

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