.parents() funktioniert nicht auf Tabelle

Question

Ich versuche, Benutzerdetails in der Benutzerliste mit AJAX JQuery anzuzeigen, aber es funktioniert nicht, wie ich brauche. Es funktioniert für meine ersten Details in der gleichen tr, aber funktioniert nicht im zweiten Detail in td in der zweiten Reihe. Wie soll ich es richtig machen? Hier

ist der Code:

Meine Ansicht:

<table class="table"> 
     <thead> 
      <th>#</th> 
      <th>name</th> 
      <th>password</th> 
      <th></th> 
     </thead> 
     <tbody> 
     @foreach($users as $user) 
      <tr> 
       <table class="table"> 
        <tr> 
         <td>{{$user->id}}</td> 
         <td>{{$user->name}}</td> 
         <td>{{$user->password}}</td> 
         <td class="extend-user" data-details="0" data-url="{{route("user", ["id" => $user->id])}}">Details</td> 
         <td id="details">a</td> 
        </tr> 
        <tr> 
         <td colspan="5" id="details">a</td> 
        </tr> 
       </table> 
      </tr> 
     @endforeach 
     </tbody>  
    </table> 

und mein Skript:

$(".extend-user").click(function() { 
    var self = this; 

    if($(self).data("details")===0) 
    $.ajax({ 
     method: "POST", 
     url: $(self).data("url"), 
     data: { 
      _token: $("#_token").val() 
     }, 
     success: function(data) { 
      $(self).parents().find("#details").append(data["name"]); 
      //$(self).parent().parent().find("#details").append(data["name"]); 
      //$(self).closest('table').find("#details").append(data["name"]);; 
      $(self).data("details", "1"); 
     } 
    }); 
    if($(self).data("details")===1) { 
     $(self).data("details", "0"); 
     $(self).parent().find("p.details").html(""); 
    } 
}); 

Answer 1

try $(self).closest("table").find("#details").append(data["name"]);

zu verwenden, die am nächsten findet das nächste übergeordnete Element, das Sie etwas finden wollen.

Answer 2

$(self).parents().find("#details").append(data["name"]);

mit

$(self).parents('tr').find("#details").append(data["name"]);