Question

我有一个来自for循环的表格如下：

<c:forEach var="user" items="${usermap}">

            <tr>

                <td>${user.getUserName()}</td>
                <td>${user.getIsActive()}</td>
                <td id="status">${user.getBadLoginAttempts()}</td>
                <td class="cellCenter"><a id="unlockBtn" href="#" class="btn btn-sm btn-primary">Unlock</a></td>




            </tr>
        </c:forEach>

所以目前我有15行。我在这里要做的是，点击unlock按钮，状态必须在第3列中更改。为此，我调用jquery Ajax调用如下，

<script>
 $("#unlockBtn").onclick(function (e) { //user types teacherId on inputfiled
   //get the user id
   alert("button clicked");
             $.post('<%=request.getContextPath()%>/controller/UserController',{'userId':userId},
                function(data)
                {
            $('.status').html(data);
                });

});

我面临的问题是，由于表是动态生成的，我无法获得用户ID。我怎么才能得到它？有人可以帮我吗？

Answer 1

由于您多次重复相同的ID，因此会在不同的浏览器中创建导致意外行为的无效标记，因此要解决此问题，您可以将ID更改/放入类名：

<c:forEach var="user" items="${usermap}">
     <tr>
        <td>user.getUserName()</td>
        <td>${user.getIsActive()}</td>
        <td class="status">${user.getBadLoginAttempts()}</td> <!--id to class-->
        <td class="cellCenter">
            <a href="#" class="btn unlockBtn btn-sm btn-primary">Unlock</a>
        </td> <!-------------------^^^^^^^^^----placed id in the class-->
     </tr>
</c:forEach>

因为你正在使用jquery所以你必须改变一点点：

$(function(){ // dom ready function its required.
   $(".unlockBtn").click(function (e) { // bind the event with className selector
       var $this = $(this);
       alert("button clicked");
       $.post('<%=request.getContextPath()%>/controller/UserController', {
         'userId': $(this).closest('tr').find('td:eq(0)').text()
       }, // do this post id-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
       function (data) {
           $this.closest('tr').find('.status').html(data);
       });
   });
});

标记和jQuery中的代码问题：

标记：

您已经为某些元素放置了一个id，因此在循环中它会在每次迭代中重复，从而导致无效的HTML生成。问题是，如果您告诉浏览器获取XXX的id，那么当它遇到标记中的第一个ID时，它会停止查找其他ID。

jQuery的：

你有一种无效的点击处理程序onclick绑定方式不可用，你可以像这样绑定事件：

$(".unlockBtn").on('click', function (e) {

或

$(".unlockBtn").click(function (e) {

Answer 2

我不确定您是否在寻找这种解决方案。检查下面的jsfiddle。

$('#unlock').click(function(){    
$(this).parent().siblings('#test').html("TEEST");
});

DEMO

获取来自for循环的表的行id

2 个答案:

标记和jQuery中的代码问题：

标记：

jQuery的：