Question

我正在尝试ajax删除表中的行。它正在工作，除了它删除整个表...表中有一个表，代码如下;

$(document).ready(function() {
$(".delete").bind('click', function(e){
    e.preventDefault();
    var parent = $(this).parents('tr');
    var string = 'id='+ parent.attr('id').replace('record-','') ;
    $.ajax({
        type: 'POST',
        url: 'ajax_delete.php',
        data: string,
        beforeSend: function() {
            parent.animate({'backgroundColor':'#fb6c6c'},300);
        },

        success: function(data) {
            if(data.status == 'success'){
                        parent.slideUp(300,function() {
                            parent.remove();
                        });
            }else if(data.status == 'error'){
                parent.animate({'backgroundColor':'#eeeeee'},300);
            } else {
                parent.animate({'backgroundColor':'#eeeeee'},300);
            }
        },          

    });
});
});

表格布局;

          <table class="tab_var1">
        <tr>
          <td class="tab_var1_pad">
            <div class="v_tables">  
              <table>
                <tr>
                  <td>
                      Domain Name
                  </td>
                  <td>
                      Stats Overview
                  </td>
                  <td>
                      Remove from CRON
                  </td>
                </tr>
    <tr class="record" id="record-1">
     <td >
        <a href="http://www.challengept.com" target="_blank">challengept.com<a>
     </td>

     <td >
        <table >
            <tr>
                <td>
                Traffic (Month)
                </td>
                <td>
                No. Keywords
                </td>
                <td>
                No. PPC Ads
                </td>       
                <td>
                Visibility
                </td>                       
            </tr>    
            <tr>
                <td>
                1796
                </td>
                <td>
                367
                </td>
                <td>
                0
                </td>       
                <td>
                0.0236900
                </td>                       
            </tr>   
            <tr>
                <td>
                Data Source - UK
                </td>
            </tr>   
        </table>
     </td>       
     <td >
                <a href="#" class="delete btn-small btn-extra">Remove</a>       
     </td>       
    </tr>
       </table>
            </div>
          </td>
        </tr>
      </table>

如果有人能让我知道如何在ajax中选择一个TR，这将是一个很大的帮助。我希望选择的TR是带有“记录”类的tr，它在最后一个td中有一个href按钮。我正在使用精选父母tr？

Answer 1

您可以使用closest：

var parent = $(this).closest('tr');
var string = 'id='+ parent.attr('id').replace('record-','') ;

我认为你可以用更好的方式做到：

<强> 1。为id字段分配数据attr

<a href="#" class="delete" data-id="1">Remove</a>

<强> 2。获取数据ID

var string = $(this).data('id');

Answer 2

.parents()返回元素的所有父元素。您只需选择直接父级或最近的祖先tr。使用以下jquery方法

var parent = $(this).closest('tr');

参见链接

https://www.w3schools.com/jquery/traversing_parents.asp

Jquery row selecting in a button onClick

AJAX元素选择表行的问题

2 个答案: