JQuery 点击按钮获取当前行 某一列的值

第一：上表：

   <table width="50%" height="50%" border="1" bgcolor="yellow" align="center">
<thead>
       <tr align="center">
     <th>英雄ID</th>
     <th>英雄名称</th>
     <th>英雄编码</th>
     <th>英雄职业</th>
     <th>职业编码</th>
     <th>新英雄职业</th>
     <th>删除职业</th>
</tr>
</thead>

<tbody>

   <c:forEach items="${userRolesList}" var="userRoles">
          <tr align="center">
       <c:forEach items="${userRoles.userList}" var="user">
    <td><input type="text" name="user_role_id"   value="${userRoles.user_role_id}"  class="user_role_id" ></td>
    <td><input type="text" name="userName"      value="${user.userName}"              class="userName"  ></td>
    <td><input type="text" name="userCode"       value="${user.userCode}"              class="userCode" ></td>
<c:forEach items="${userRoles.roleList}" var="role">
    <td>
<input type="text" name="role_name" value="${role.role_name}" class="role_name">
   </td>
   <td>
  <input type="text" name="roleCodes" value="${role.roleCode}"    class="roleCodes" >
    </td>
     <td>
<select >
     <c:forEach items="${roleList}" var="role" >
           <option value="${role.roleCode}" class="chooseRoles">
     ${role.role_name}
          </option>
    </c:forEach>
</select>
    </td> 
    <td>
  <input type="button" value="删除英雄职业"  class="delHero">
    </td> 
   </c:forEach>
         </c:forEach>
</tr>
     </c:forEach>
     <tr>
  <td colspan="4" align="center"><input type="button" value="职业转职"  class="changeRoles"></td>
   <td colspan="4" align="center"><input type="button" value="返回主页"  onclick="BACK()"></td>
     </tr>

</tbody>

</table>

第二： JQuery

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">

 $(document).ready(function(){  

     $(".delHero",this).click(function(){

    var roleCode = $(this).parents("tr").find(".roleCodes").val();        //删除按钮当前行 Class 为 roleCodes 中的值
           var userCode = $('.userCode').val();
   var userID = $('.user_role_id').val();
 
$.ajax({
url : "/user/userRoles/delUserRolesService.action?userCode="+userCode+"&roleCode="+roleCode,
type : "POST",
dataType: "json",
processData : false,
contentType : false,
success : function(data) {
    alert("删除英雄职业成功！");
  window.location.href="${pageContext.request.contextPath}/userRoles/findUserRoles.action?userID="+userID;
},
error : function(data) {
    alert("删除英雄职业失败");
}
 });   
   
  });

 });

第三：效果图