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

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

Answer 2

你已经完成了大部分工作。您需要做的就是确定需要编辑哪些用户以及需要删除哪些用户。我修改了你的HTML以允许两者。现在＆＃34; editUser（）＆＃34;方法和新＆＃34; deleteUser（）＆＃34;方法采取＆＃34; id＆＃34;作为参数。

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

识别节点js

2 个答案: