노드 js의 특정 요소 식별

Question

여기에 사용자 정보 목록이있는 표가 있습니다. 각 행은 업데이트 아이콘과 삭제 아이콘으로 구성됩니다. 특정 사용자 레코드는 삭제 아이콘을 클릭 할 때 삭제되어야합니다. 테이블의 행은 동적으로 생성됩니다. 그러면 어떤 사용자의 삭제 아이콘이 클릭되었는지 식별 할 수 있습니까? 이 모든 내용은 ejs 파일에 있습니다.

<tbody> 
    <% for(var item in user) { %> 
    <% console.log(user); %> 
      <tr> 
       <td><%= user[item].id %></td> 
       <td><%= user[item].firstName %></td> 
       <td><%= user[item].lastName %></td> 
       <td><%= user[item].emailId %></td> 
      <td> 
      <span onclick="editUser()" class="glyphicon glyphicon-edit"></span> 
      <span class="glyphicon glyphicon-remove"></span> 
      </td> 
      </tr> 
     <% }%> 
</tbody> 

첫 번째 열에 사용자 ID가 있습니다. 어떤 사용자의 삭제 아이콘이 클릭되었는지 식별하려면 어떻게해야합니까? db에있는 사용자 정보를 삭제하고 페이지를 다시로드하지 않고 여기에 반영하고 싶습니다 (Ajax 사용).

Answer 1

이미 대부분 작업을 완료했습니다. 편집해야 할 사용자와 삭제해야 할 사용자를 파악하기 만하면됩니다. 두 가지 모두를 허용하도록 HTML을 수정했습니다. 이제 "editUser()"메서드와 새로운 "deleteUser()"메서드는 "id"를 매개 변수로 사용합니다.

<tbody> 
<% for(var item in user) { %> 
<% console.log(user); %> 
     <tr> 
      <td><%= user[item].id %></td> 
      <td><%= user[item].firstName %></td> 
      <td><%= user[item].lastName %></td> 
      <td><%= user[item].emailId %></td> 
     <td> 
     <span onclick="editUser(<%= user[item].id %>)" class="glyphicon glyphicon-edit"></span> 
     <span onclick="deleteUser(<%= user[item].id %>)" class="glyphicon glyphicon-remove"></span> 
     </td> 
     </tr> 
<% }%> 
</tbody> 

Answer 2

<table id="userstable"> 
<tbody> 
    <% for(var item in user) { %> 
    <% console.log(user); %> 
      <tr> 
       <td class="id"><%= user[item].id %></td> 
       <td><%= user[item].firstName %></td> 
       <td><%= user[item].lastName %></td> 
       <td><%= user[item].emailId %></td> 
      <td> 
      <span onclick="editUser()" class="glyphicon glyphicon-edit"></span> 
      <span class="glyphicon glyphicon-remove"></span> 
      </td> 
      </tr> 
     <% }%> 
</tbody> 
</table> 

<script> 
    $("#userstable .glyphicon-remove").on("click", function(e){ 
    var id = $(this).closest("tr").find("td.id").text(); 
    alert(id); 
    //Use id here to make ajax call as you desire 
    });//click 
</script>