如何在充满行的表上使表行淡出

Question

Hey guys so I have a list populated by php and here is the layout:

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

Here is my 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()
        }
      });
    });

This above code works great I just can't figure out how to fade out the <tr class='search-fade'> If you could give me a hand I would appreciate it!

David

Answer 1

You need to cache the element so you can use it inside the success function. You need to traverse up and not down the dom tree to find the table row because the button is a descendant of the 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
        }
    });
});

Answer 2

Try this,

$(".cancelmember").click(function () {
        remove_name = $(this).parent().parent().find(".removeemp-user");
        var $this = $(this); //Make sure this is parent element not button. You may have to adjust the element here

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

Answer 3

$(this) refers to the button that was clicked, so unless the table rows are decendents of the button in the DOM, $(this).find(".search-fade") will not find them.

You shoud change $(this) to a parent element of the table row.

Answer 4

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

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

You need to go 2 levels up.
tr.search-fade <- this needs to fade out
---- td
--------- input.cancelmember <-click happened here