2016-07-05 9 views
0

私はそこにユーザ情報のリストを持つテーブルを持っています。各行は、更新アイコンと削除アイコンで構成されています。特定のユーザーレコードは、削除アイコンをクリックすると削除される必要があります。表の行は動的に生成されます。では、どのユーザーの削除アイコンがクリックされたのかを確認する方法はありますか?これらはすべてejsファイルにあります。ノードjs内の特定の要素を特定します

<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の使用)。

+0

あなたはパラメータとしてidを渡すか、 'editUser()'関数( 'onclick =" editUser(this) "')に 'this'を渡して、関数内でid : 'function editUser(el){id = el.parentNode.parentNode.children [0] .innerHTML; } ' –

答えて

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> 
1
<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> 
関連する問題