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("成功");
}
})
})
}
//)
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律