So verwenden Sie JQuery, um eine bestimmte Schaltfläche in einer bestimmten Zeile anzuzeigen

Question

Okay, ich habe eine Webseite in HTML/PHP und eine externe JS-Datei. Ich versuche AJAX zu implementieren. Ich habe eine Tabelle, jede Zeile hat eine Bearbeitungsschaltfläche. Ich möchte es so, dass, wenn ich auf die Bearbeitungsschaltfläche klicke, meine Abbrechen-Schaltfläche (die ich ausgeblendet habe) nur für diese Zeile anzeigen.

Mein Denken war, wenn ich $ (this) .parent verwendet, um das übergeordnete Element der angeklickte Schaltfläche (Update) auszuwählen, dann hinzugefügt (".cancel"). Toggle(); Es würde nur die Schaltfläche "Abbrechen" des übergeordneten Elements der angeklickten Schaltfläche aktivieren.

ich diesen Code versucht, mit,

$(".edit").click(function() { 
    $(":text").prop('disabled', false); 
    $(this).closest(".cancel").toggle(); 
    $("input[name=txtTeam]").hide(); 
    $.get("actionPages/updatePlayer.php", { 
     player: ID 
    }, function(response) { 
     alert(response); 
     location.reload(); 
    }); 
}); 

Wer weiß, wie kann ich dies tun?

Hier ist der relevante HTML

$pTable .= "<div class='row'> 
       <div class='cell'> 
        <a class='delete'>Delete</a> 
        <a class='edit'>Edit</a> 
        <a class='cancel'>Cancel</a> 
       </div> 
       <div class='cell'><input disabled size='2' type='text' name='txtID' value='$ID'></div> 
       <div class='cell'><input disabled size='25' type='text' name='txtFirst' value='$first'></div> 
       <div class='cell'><input disabled size='25' type='text' name='txtLast' value='$last'></div> 
       <div class='cell'><input disabled size='25' type='text' name='txtEmail' value='$email'></div> 
       <div class='cell'><input disabled size='25' type='text' name='txtTeam' value='$team'></div> 
      </div>"; 

ich eine While-Schleife Setup jede Zeile angezeigt werden, aber wenn ich versuchte, es zu fügen in es messed die Formatierung auf. Vielen Dank.

Answer 1

Nächste Funktionsabfrage am nächsten Elternteil! verwenden folgende:

$(this).closest(".row").find(".cancel").toggle(); 

Answer 2

closest() Funktion

$(this).closest(".cell").find('.delete').toggle(); 
    $(this).closest(".cell").find('.cancel').toggle(); 

JSFiddle

Answer 3

den DOM-Baum so liefern Vorfahren des Bearbeiten-Button sucht up Sie wie unten

HTML tun können

<table> 
    <tr> 
     <td>Hello</td> 
     <td><input type="button" class="edit" value="Edit"/></td> 
     <td><input type="button" class="canclebutton" value="Cancel"/></td> 
    </tr> 
    <tr> 
     <td>Hello1</td> 
     <td><input type="button" class="edit" value="Edit" /></td> 
     <td><input type="button" class="canclebutton" value="Cancel" /></td> 
    </tr> 
    <tr> 
     <td>Hello2</td> 
     <td><input type="button" class="edit" value="Edit" /></td> 
     <td><input type="button" class="canclebutton" value="Cancel" /></td> 
    </tr> 
    <tr> 
     <td>Hello3</td> 
     <td><input type="button" class="edit" value="Edit" /></td> 
     <td><input type="button" class="canclebutton" value="Cancel" /></td> 
    </tr> 
</table> 

Script

$(".canclebutton").hide(); 

$(".edit").click(function() {   
    $(this).closest('tr').find('.canclebutton').toggle(); 
    . 
    . 
    . 
    . 
}); 

Answer 4

$pTable = "<div class='row'><div class='cell'><a class='delete'>Delete</a><a class='edit'>Edit</a><a class='cancel'>Cancel</a></div><div class='cell'><input disabled size='2' type='text' name='txtID' value='$ID'></div><div class='cell'><input disabled size='25' type='text' name='txtFirst' value='$first'></div><div class='cell'><input disabled size='25' type='text' name='txtLast' value='$last'></div><div class='cell'><input disabled size='25' type='text' name='txtEmail' value='$email'></div><div class='cell'><input disabled size='25' type='text' name='txtTeam' value='$team'></div></div>"; 
 

 
$('#div').append($pTable) 
 

 

 
$(document).on('click',".edit",function() { 
 
    $(this).next(".cancel").toggle(); 
 
});

.cancel{display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='div'></div>

Da es dynamisch erstellt wird, klicken Sie auf die Ereignisdelegaten Verwendung dokumentieren .on() dann .next() verwenden die Aufhebungs seit nächste ist