javascript - 如何在满是行的表格上使表格行淡出

Question

大家好，我有一个由 php 填充的列表，这是布局:

<table>
     <tr>
        <td>
        ....
        <td>

    </tr>

    <tr class='firsttr' style='background:gray;'>
     <td>Remove selected</td>
     <td>First Name </td>
     <td>Last Name </td>
     <td>Email </td>
     <td>Phone </td>
     <td>Username </td>
     <td>Password </td>
     <td>Status </td>
     <td>Status Change Date</td>
     <td>#</td>
    </tr>


       <tr class='search-fade'> <!-- this is the part that I need to fade out based on which button was clicked for that user. -->
              <td>
        <input type='button' value='Remove employee'  name='cancelmember' class='cancelmember' />
      </td>
        //....table data    
               <td>
               $csvusername
    <input type='hidden' value='$csvusername'  name='username' class='removeemp-user'/>
    </td>                           
          </tr>                         
</table>

这是我的 Jquery:

$(".cancelmember").click(function () {
        remove_name = $(this).parent().parent().find(".removeemp-user");


        $.ajax({
        type: "POST",
        dataType: "json",
        url: '/pcg/removemem.php',
        data: {
            'username': remove_name.val()
        },
        success: function(){
            alert("Employee Removed"),
            $(this).find(".search-fade").fadeOut()
        }
      });
    });

上面的代码效果很好我只是不知道如何淡出 <tr class='search-fade'>如果你能帮助我，我将不胜感激!

大卫

Answer 1

您需要缓存该元素，以便可以在成功函数中使用它。您需要向上遍历而不是向下遍历 dom 树才能找到表行，因为按钮是 tr 的后代

$(".cancelmember").click(function () {
    remove_name = $(this).parent().parent().find(".removeemp-user");
    var $this = $(this); // <-- cache the current element

    $.ajax({
        type: "POST",
        dataType: "json",
        url: '/pcg/removemem.php',
        data: {
            'username': remove_name.val()
        },
        success: function () {
            alert("Employee Removed"),
            $this.closest(".search-fade").fadeOut(); // <-- use closest since button is descendant of table row
        }
    });
});