第一:上表:
<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="返回主页" οnclick="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("删除英雄职业失败");
}
});
});
});
第三:效果图