代码之家 › 专栏 › 技术社区 › Brian Bruman

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

this jquery

Brian Bruman · 技术社区 · 7 年前

我有一个这样的表格,在我的页面上弹出一个窗口(这意味着页面上可能会出现很多这样的情况)

<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。如何修改它,使其始终选择最后一行的父级(或最接近dom的位置,如图所示)/ TR 第一列呢/ TD ?

1 回复 | 直到 7 年前

Chris Happy Roddy 7 年前

如果按钮直接位于桌子后面,则可以使用:

$(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>