Jquery：テーブル内の行を選択し、そのデータを使用しますか？

Question

私は両方の行を選択して行を削除するテーブルにしたいが、私はJQueryでこれを行う方法を説明することはできません。コードは、テーブルの最初の行にのみ効果があります。だから私は最初の行を削除することができますが、他の行。なにが問題ですか。ここに私が試したものです：あなたは、そのIDを再利用しているので、あなたは、あなたのループ内（それで行く他の二つのdiv Sと一緒に）<div id="candidateID">を作成している

<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

私はあなたが持っているアイテムのコレクションを反復処理するためのforeachであなたのイベントフックアップをラップする必要があると思います。

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

私はこれをテストする機会がありませんでしたが、それ以外の場合は正しい軌道に乗る必要があります。私はまた、あなたのページ生成ループ、すなわちで直接これを行うことができると思い

：

<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

=」あなたが持っているすべての候補者の「候補ID」属性を使用します。この場合、jQuery（および基礎となるブラウザ）は、最初のそのようなフィールドだけを認識することを選択しているため、最初の行のみを削除することができます。

実際の除去を行うコードの行は正しいです：

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

は、あなただけのcandidateIDが理にかなって何かに設定されていることを確認する必要があります。より多くの文脈がなければ、私はそれが何であるか分からない。

Answer 3

あなたが実際にTRを削除するためのセレクタに何かを補間する必要はありませんが、例えば、これは動作します：

$("#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(); 
    }