JQuery table操作用例
Jsp页面:
<c:choose> <c:when test="${empty page ||empty page.result}"> <tr> <td colspan="4" style="align: center;"> 暂时没有检测计划! </td> </tr> </c:when> <c:otherwise> <c:forEach var="result" items="${page.result}"> <tr id="${result.planId}"> <!-- 将实体的所有信息放在影藏input中,供其他功能使用 --> <input type="hidden" id='planId' name='planId' value="${result.planId }" /> <input type="hidden" id='planObject' name='planObject' value="${result.planObject }" /> <input type="hidden" id='planName' name='planName' value="${result.planName }" /> <input type="hidden" id='planInfo' name='planInfo' value="${result.planInfo }" /> <input type="hidden" id='planTime' name='planTime' value="${result.planTime }" /> <input type="hidden" id='planStart' name='planStart' value="${result.planStart }" /> <input type="hidden" id='planClose' name='planClose' value="${result.planClose }" /> <input type="hidden" id='planStatus' name='planStatus' value="${result.planStatus }" /> <input type="hidden" id='planMaker' name='planMaker' value="${result.planMaker }" /> <input type="hidden" id='planMark' name='planMark' value="${result.planMark }" /> <td> ${result.planName} </td> <td> <fmt:formatDate value="${result.planTime }" pattern="yyyy-MM-dd" /> <input type="hidden" id='planCreateTimeInput' name='planCreateTimeInput' value="${result.planTime }" /> </td> <td style='text-align: center; color: red;'> <c:choose> <c:when test="${result.planStatus==JC_PLAN_STATE_NEW}">新创建</c:when> <c:when test="${result.planStatus==JC_PLAN_STATE_FENJIE}">已分解</c:when> <c:when test="${result.planStatus==JC_PLAN_STATE_END}">已完成</c:when> <c:when test="${result.planStatus==JC_PLAN_STATE_PUBLIC}">已发布</c:when> <c:otherwise> </c:otherwise> </c:choose> </td> <td style='text-align: center;'> <c:choose> <c:when test="${result.planStatus==JC_PLAN_STATE_NEW}"> <a href="detection/createTask?planId=${result.planId }">分解</a> <a href="javascript:editPlan(${result.planId})">编辑</a> </c:when> <c:otherwise> <a href="detection/seePlanDetail?planId=${result.planId }">查看</a> </c:otherwise> </c:choose> </td> </tr> </c:forEach> </c:otherwise> </c:choose>
Jquery 脚本:
//编辑按钮点击事件 function editPlan(num){//num是为了标记 想要编辑的是哪一行数据 var planId; var planObject; var planName; var planInfo; var planTime; var planStart; var planClose; var planStatus; var planMaker; var planMark; $("#planResultTable tr[id="+num+"]").each(function (){//遍历 id为planResultTable的表格,的id为num的tr 找到该tr中的 需要的值 planId=$(this).find("input[name=planId]").val(); planObject=$(this).find("input[name=planObject]").val(); planName=$(this).find("input[name=planName]").val(); planInfo=$(this).find("input[name=planInfo]").val(); planTime=$(this).find("input[name=planTime]").val(); planStart=$(this).find("input[name=planStart]").val(); planClose=$(this).find("input[name=planClose]").val(); planStatus=$(this).find("input[name=planStatus]").val(); planMaker=$(this).find("input[name=planMaker]").val(); planMark=$(this).find("input[name=planMark]").val(); }); //时间格式截取(原始格式为<2013-04-08 16:09:09.0> 截取后格式为:<2013-04-09>) planTime=planTime.substr(0,10); planStart=planStart.substr(0,10); planClose=planClose.substr(0,10); //将取到的值付给表单的每个input 供编辑使用 $("#planAddTable").each(function (){ $(this).find("input[id=planId]").attr("value",planId); $(this).find("input[id=planObject]").attr("value",planObject); $(this).find("input[id=planName]").attr("value",planName); $(this).find("textarea[id=planInfo]").attr("value",planName); $(this).find("input[id=planTime]").attr("value",planTime); $(this).find("input[id=planStart]").attr("value",planStart); $(this).find("input[id=planClose]").attr("value",planClose); $(this).find("input[id=planStatus]").attr("value",planStatus); $(this).find("input[id=planMaker]").attr("value",planMaker); $(this).find("input[id=planMark]").attr("value",planMark); }); //将表单显示出来 $("#JcPlanInputDiv").show(); }
效果展示:1.信息列表,点编辑后 获取影藏字段值付给 表单--》显示表--》编辑
2.点击编辑后效果:

如果我的文章对你有帮助,欢迎微信支付打赏。

【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构