jquery - 使用带有下方按钮的 $(this) 获取表中最后一行的值

Question

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

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

直接在下面我有一个按钮，可以在 cick 上动态添加行

<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();

到目前为止，但这似乎只带回了表中的第一行 TR。我该如何修改它，以便它始终选择 LAST row/TR和 first column/的父级（或最接近 DOM，如图所示） TD？

标签： jquerythis

Answer 1

如果按钮直接位于表格之后，则可以使用。：

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

如果表格和 , 之间有一个元素.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>