jquery操作列表
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>订单状态修改</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="/js/bootstrap.min.js"></script> <link rel="stylesheet" href="/css/bootstrap.min.css"> </head> <body> <!--<div th:insert="~{index::navigation}"></div>--> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <form class="navbar-form navbar-left" role="search" method="get" action="/orderModify"> <div class="form-group"> <span><b>订单号</b></span> <input type="text" class="form-control" name="reqId" placeholder="请输入reqId" style="width: 250px;"> </div> <button type="submit" class="btn btn-default">查询订单状态</button> </form> </div> </div> </nav> <div> <table class="table"> <tr> <td>需求ID:</td> <td id="reqId" name="reqId" th:if="${reqOrder!=null}" th:value="${reqOrder.reqId}" th:text="${reqOrder.reqId}"></td> </tr> <tr> <td>当前状态:</td> <td th:if="${reqOrder!=null}" th:text="${reqOrder.orderStatus}"></td> </tr> <tr> <td>修改状态:</td> <td> <select class="form-control reqOrder" id="reqOrderStatusSelect"> <option id="reqOrderStatus" name="reqOrderStatus" th:value="${corpOrderStatus.getCode()}" th:each="corpOrderStatus:${corpOrderEnum}" th:text="${corpOrderStatus.getCode()}+'('+${corpOrderStatus.getName()}+')'"></option> </select> </td> </tr> <tr> <td> <button type="submit" class="btn btn-primary" id="reqStatusSubmit">提交</button> </td> </tr> </table> </div> <div style="margin-top: 50px"> <table class="table" th:if="${suppOrders!=null}"> <tr> <th>订单ID</th> <th>订单状态</th> <th>修改状态</th> <th>操作</th> </tr> <tr th:each="suppOrder:${suppOrders}"> <td th:text="${suppOrder.suppOrderId}" id="suppOrderId"></td> <td th:text="${suppOrder.orderStatus}" id="orderStatus"></td> <td> <select class="form-control suppOrder" id="suppOrderStatusSelect"> <option id="suppOrderStatus" name="suppOrderStatus" th:value="${suppOrderStatus.getCode()}" th:each="suppOrderStatus:${suppOrderEnum}" th:text="${suppOrderStatus.getCode()}+'('+${suppOrderStatus.getName()}+')'"></option> </select> </td> <td><button type="submit" class="btn btn-primary suppStatus" id="suppStatusSubmit">提交</button></td> </tr> </table> </div> </body> </html>
// $(
window.onload=function () {
var reqOrderStatus;
var suppOrderStatus;
// $(".form-control.reqOrder").change(function () {
// reqOrderStatus = $(this).val();
// })
$("#reqStatusSubmit").click(function () {
reqOrderStatus=$("#reqOrderStatusSelect option:selected").val();
if($("#reqId").val()==null){
alert("订单号不能为空");
return;
}
$.ajax({
type:'POST',
url: "/reqOrderModify",
data:{
reqId:$("#reqId").html(),
reqStatus:reqOrderStatus
},
success:function (data) {
alert("成功");
}
})
})
//修改订单状态
$(".btn.btn-primary.suppStatus").click(function () {
var suppOrderId = $(this).parent().parent().find('td').eq(0).html();
//suppOrderStatus = $(".form-control.suppOrder option:selected").val();
suppOrderStatus=$(this).parent().parent().find('option:selected').val();
alert(suppOrderStatus);
if(suppOrderStatus==null){
alert("订单状态不能为空");
return;
}
$.ajax({
type:'POST',
url: "/suppOrderModify",
data:{
suppOrderId:suppOrderId,
suppOrderStatus:suppOrderStatus
},
success:function (data) {
alert("成功");
}
})
})
}
//)