php - AJAX 元素选择表格行问题

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 是具有“record”类的 tr，它在最后一个 td 中有一个 href 按钮。我正在使用选择 parent tr？

Answer 1

您可以使用closest来实现此目的:

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

我认为你可以用更好的方法来做到这一点，如下所示:

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

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

<强>2。获取数据id

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