使用 $(this) 和下面的按钮获取 Table 中最后一行的值

Question

我有一个这样的 table，它会在我的页面上弹出一个窗口（这意味着页面上可能会出现很多这样的情况）

<table class="tab_logic">
<thead><th>#</th><th>SKU</th><th>Quantity</th></thead>
<tbody></tbody>
</table>

在我的正下方有一个按钮，可以在单击时动态添加行

<div class="actions><a id="add_row">Add Row</a></div>

以前我在 add_row

的点击功能中使用它

var num = $('.tab_logic tr:last td:first').text();

在我开始打开多个弹出窗口并且我的 DOM 开始与新弹出窗口重叠之前效果很好。

我相信我最好的解决方案是使用 $(this) 而不是依赖 DOM--

var num = $(this).parent().parent().find('td:first').text();

到此为止，但这似乎只返回 table 中的第一个 TR 行。我如何修改它，以便它始终选择最后一行/TR 和第一列/TD?[=18= 的父级（或最靠近 dom 的父级，如图所示） ]

Answer 1

如果按钮直接在 table 之后，您可以使用。:

$(this).parent().prev().find('tr:last td:first').text();

如果 table 和 .actions 之间有一个元素（例如下面的 `
标签），您需要下面的代码。

(function($) {
  $('#add_row').click(function () {
    var $this = $(this),
        num = $this.parent()
                .siblings('.tab_logic') // .prev() could also depending on the markup.
                .find('tr:last td:first').text();
                
    console.log(num);
  });
    
})(jQuery)

table {
  border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tab_logic" cellpadding="5px" border="1">
  <thead>
    <th>#</th>
    <th>SKU</th>
    <th>Quantity</th>
  </thead>
  <tbody>
    <tr>
      <td>1. 1st</td>
      <td>1. 2nd</td>
      <td>1. 3rd</td>
    </tr>
    <tr>
      <td>2. 1st</td>
      <td>2. 2nd</td>
      <td>2. 3rd</td>
    </tr>
    <tr>
      <td>3. 1st</td>
      <td>3. 2nd</td>
      <td>3. 3rd</td>
    </tr>
  </tbody>
</table>
<br>
<div class="actions"><a id="add_row">Add Row</a></div>

使用 $(this) 和下面的按钮获取 Table 中最后一行的值

Get Value of Last Row In Table Using $(this) with Button Underneath

jquery

this