JQuery: выберите строку в таблице и используйте ее данные?

Question

У меня есть таблица, где я хочу быть как для выбора строки, так и для удаления строки, но я не могу понять, как это сделать с помощью JQuery. Код i влияет только на первую строку в таблице. Поэтому я могу удалить первую строку, но ни один другой. Что не так. Вот что я пробовал:

<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

Вы создаете <div id="candidateID"> (наряду с двумя другими div с, которые идут с ним) внутри вашего цикла, так что вы повторно использовать этот идентификатор =» candidID "для каждого кандидата, который у вас есть, который обязательно сломает вещи. В этом случае 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(); 
    }