前端：JS獲取單擊按鈕單元格所在行的信息

在操作表格前后端交互式時，總會遇到將所要操作的行的信息傳至后台進行數據庫更新的操作，本文適用於標准的html頁面和js庫，並提出了三種操作方式根據實際情況進行選擇

1.表格格式如圖所示

 

2.表格代碼如圖所示

<c:forEach items="${users}" var="user">
  <tr>
    <td id="">${user.createTime}</td>
    <td id="userName">${user.userName}</td>
    <td id="">${user.role}</td>
    <td id="">${user.phone}</td>
    <td id="">${user.groupId}</td>
    <td id="">${user.groupRole}</td>
    <td id="">${user.lastUpdate}</td>
    <td>
      <button id="edit" class="layui-btn layui-btn-small">
        <i class="layui-icon">&#xe642;</i>
      </button>
      <button id="delete" class="layui-btn layui-btn-small">
        <i class="layui-icon">&#xe640;</i>
      </button>
    </td>
  </tr>
</c:forEach>

 

3.獲取電機按鈕指定列的值代碼如下

 $('#delete').on('click', function() {
      //第一種方式按照index進行值的獲取，個人不推薦
      //var userName = $(this).parents("tr").children("td:nth-child(2)").text();
      //第二種方式按照id獲取值,推薦
      var userName = $(this).parents("tr").find("#userName").text();
      //第三種方式按照class獲取值
      //var userName = $(this).parents("tr").find(".userName").text();
});

 

4.需要注意的是需要引入jquery.js庫

<script src=".../jquery.min.js?t=1484026799191" charset="utf-8"></script>

 

5.效果圖如下