jquery 如何找到动态表td的父表?

9gm1akwq  于 2023-10-17  发布在  jQuery
关注(0)|答案(1)|浏览(138)

下面是一些HTML代码:

$("#MyTable").on('click', '.MakeNewTableRow', function() {
  var thisRow = $(this).closest("tr");
  thisRow.after("<tr><td>click me</td></tr>");
  thisRow.next().find("td:first").addClass('ShowTheTDValue');
});

$("#MyTable").on('click', '.ShowTheTDValue', function() {
  alert($(this).parent().find("td:first").text());
});
<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>

我会得到一个关于$(this).parent不是一个定义函数的JavaScript错误。我可以理解为什么动态创建的项不是DOM的一部分,因此我不能用parent()函数访问前一个表行,但是肯定有 * 一些 * 方法可以从动态创建的表行上面的表行中获取数据吗?
我该怎么做?我只需要把“whatever”这个词放到一个JavaScript变量中。

fzsnzjdm

fzsnzjdm1#

您可能需要使用$(this).parent().prev().find(“td:first”).text()`。
通过使用parent,您将获得正在单击的元素的父元素。但是您实际上希望元素在被单击的元素的父元素之前。

$("#MyTable").on('click', '.MakeNewTableRow', function() {
  var thisRow = $(this).closest("tr");
  thisRow.after("<tr><td>click me</td></tr>");
  thisRow.next().find("td:first").addClass('ShowTheTDValue');
});

$("#MyTable").on('click', '.ShowTheTDValue', function() {
  alert($(this).parent().prev().find("td:first").text());
});
<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>

相关问题