Jquery: Select a row in a Table and use its data?

Question

Hey

I have a table where i want to be to both select a row and delete a row, but i can't figur out how to do this with JQuery. The code i have only effects the first row in the table. So i can remove the first row but no other. What is wrong. Here is what i tried:

<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

You're creating <div id="candidateID"> (along with the two other divs that go with it) inside your loop, so you're reusing that id="candidateID" attribute for every candidate you have, which is sure to break things. In this case, jQuery (and the underlying browser, of course) is choosing to recognize only the first such field, and thus you can only ever delete the first row.

The line of code that does the actual removal is correct:

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

You just need to make sure that candidateID is set to something that makes sense. Without more context, I'm not sure what that would be.

Answer 2

I think you need to wrap your event hookup in a foreach to iterate over the collection of items you have.

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

I've not had the chance to test this but if nothing else it should get you on the right track.

I guess you could also do this directly in your page generation loop, i.e.:

<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 3

You don't actually need to interpolate anything into the selector for deleting the TR, for example, this will work:

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