Jquery: Wählen Sie eine Zeile in einer Tabelle und verwenden Sie ihre Daten?

Question

Ich habe eine Tabelle, wo ich sowohl eine Zeile auswählen und eine Zeile löschen möchte, aber ich kann nicht herausfinden, wie dies mit JQuery zu tun. Der Code ich habe nur Auswirkungen auf die erste Zeile in der Tabelle. So kann ich die erste Reihe entfernen, aber keine andere. Was ist falsch. Hier ist, was ich versucht:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<script type="text/javascript" language="javascript"> 
    $(document).ready(function() { 
     $("#newCandidatesTable").tablesorter(); 
     var candidateID = $("#candidateID").text(); 

     // Event actions 
     $("#acceptCandidateButton_" + candidateID).click(function(e) { 
      $.post("/Admin/AcceptCandidate/", { candidateID: $("#candidateID").text() }, completeAccept()); 
     }); 

     // Functions 
     function completeAccept() { 
      showMsgBox($("#candidateName").text() + " er blevet accepteret, som ansøger til stillingen: ..."); 
      $("#tr_" + candidateID).remove(); 
     } 

     function getFirstNameFromFullName(fullName) { 
      var nameArray = new Array(); 

      nameArray = fullName.toString().split(" "); 

      return nameArray[0]; 
     } 
    }); 
</script> 
<h2>Nye ansøgere</h2> 
<table id="newCandidatesTable"> 
    <thead> 
     <tr> 
      <th style="cursor: pointer;">ID</th> 
      <th style="cursor: pointer;">Navn</th> 
      <th style="cursor: pointer;">Email</th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 
<% foreach (var candidate in Model) 
{ 
    %> 
     <tr id="<%= "tr_" + candidate.iAnsogerID %>"> 
      <td><div id="candidateID"><%= candidate.iAnsogerID %></div></td> 
      <td><div id="candidateName"><%= candidate.vNavn %></div></td> 
      <td><div id="candidateEmail"><%= candidate.vEmail %></div></td> 
      <td> 
       <div id="<%= "acceptCandidateButton_" + candidate.iAnsogerID %>" style="cursor: pointer; border: 1px solid black; width: 150px; text-align: center;">Godkend</div> 
      </td> 
     </tr> 
    <% 
} %> 
</tbody> 
</table> 

Answer 1

Ich denke, Sie müssen Ihre Event-Verbindung in einer foreach um die Sammlung der Elemente, die Sie haben iterieren.

Ich hatte nicht die Chance, dies zu testen, aber wenn nichts anderes sollte Sie auf dem richtigen Weg bekommen.

Ich denke, Sie auch diese in Ihrer Seite Generation Schleife direkt tun könnten, das heißt:

<td> 
    <div id="<%= "acceptCandidateButton_" + candidate.iAnsogerID %>" style="cursor: pointer; border: 1px solid black; width: 150px; text-align: center;" onclick="$.post("/Admin/AcceptCandidate/", { candidateID: " + candidate.iAnsogerID + " }, completeAccept())">Godkend</div> 
</td> 

Answer 2

Sie erstellen <div id="candidateID"> (zusammen mit den beiden anderen div s, die mit ihm zu gehen) innerhalb Ihre Schleife, so dass Sie diese ID sind die Wiederverwendung =“ candidateID "Attribut für jeden Kandidaten, den Sie haben, der sicher die Dinge bricht. In diesem Fall wählt jQuery (und natürlich der zugrunde liegende Browser) nur das erste solche Feld und Sie können daher nur die erste Zeile löschen.

Die Codezeile, die die tatsächliche Entfernung tut, ist richtig:

$("#tr_" + candidateID).remove(); 

Sie müssen nur sicherstellen, dass candidateID auf etwas festgelegt ist, die Sinn macht. Ohne weiteren Kontext bin ich nicht sicher, was das wäre.

Answer 3

Sie haben nicht wirklich etwas in die Wähler zu interpolieren, müssen für die TR zu löschen, zum Beispiel, das funktioniert :

$("#acceptCandidateButton_" + candidateID).click(function(e) { 
     $.post("/Admin/AcceptCandidate/", { candidateID: $("#candidateID").text() }, completeAccept($(this)); 
    }); 

    // Functions 
    function completeAccept(context) { 
     showMsgBox($("#candidateName").text() + " er blevet accepteret, som ansøger til stillingen: ..."); 
     context.parent().parent().remove(); 
    }