el表达式，写入bootstrap表格，简化代码，效果图：
不多说，上干货：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %> <c:set var="ctx" value="${pageContext.request.contextPath}"/> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"https://www.jb51.net/"; %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>知识库</title> <link href="<%=basePath %>knowledge-bs/css/bootstrap.min.css"> <link href="<%=basePath %>knowledge-bs/css/bootstrap-table.min.css"> <link href="<%=basePath %>knowledge-bs/css/toastr.css" /> <link href="<%=basePath %>knowledge-bs/css/sweetalert.css" /> <script src="<%=basePath %>knowledge-bs/js/jquery.min.js"></script> <script src="<%=basePath %>knowledge-bs/js/sweetalert.min.js"></script> <script src="<%=basePath %>knowledge-bs/js/bootstrap.min.js"></script> <script src="<%=basePath %>knowledge-bs/js/tableExport.js"></script> <script src="<%=basePath %>knowledge-bs/js/jquery.base64.js"></script> <script src="<%=basePath %>knowledge-bs/js/bootstrap-table.js"></script> <script src="<%=basePath %>knowledge-bs/js/bootstrap-table-export.js"></script> <script src="<%=basePath %>knowledge-bs/js/toastr.js"></script> <style type="text/css"> #reportTableDiv td{height: 50px; text-align: center; line-height: 50px; width: auto;} #reportTableDiv th{height: 50px; text-align: center; line-height: 50px; width: auto;} </style> </head> <body> <jsp:include page="zsfktck.jsp"></jsp:include> <center> <div> <ul> <li><a href="/receiverShow/knowledge-bs/knowledge.html#container">知识库管理</a></li> <li><a href="/receiverShow/findKnowRevi_el.action#container">知识库审核</a></li> <li><a href="/receiverShow/findAskManagement_el.action#container1">提问管理</a></li> </ul> <div> <table> <thead> <tr> <td><label>关键字</label></td> <td><input type="text" aria-describedby="sizing-addon2" value="" placeholder="请输入关键字"/></td> <td><label>标题</label></td> <td><input type="text" aria-describedby="sizing-addon2" value="" placeholder="请输入标题"/></td> <td><label>内容</label></td> <td><input type="text" aria-describedby="sizing-addon2" value="" placeholder="请输入内容"/></td> </tr> </thead> </table> <div> <button>查询</button> <button>重置</button> </div> </div> <div> <table> <thead> <tr> <th>标题</th> <th>分类</th> <th>关键字</th> <th>点击数</th> <th>提交时间</th> <th>详情</th> <th>操作</th> </tr> </thead> <tbody> <c:forEach var="list" items="${protectLists}"> <tr> <td>${list.title }</td> <td>${list.classification }</td> <td>${list.keyword }</td> <td>${list.clicks}</td> <td>${list.committime}</td> <td><a data-toggle="modal" data-target="#myModal">详情</a> </td> <td><a data-toggle="modal" data-target="#myModal">审核</a> </td> </tr> </c:forEach> </tbody> </table> </div> </div> </center> </body> <script type="text/javascript"> $('#serch').click(function () { $.ajax({ type: "POST", url: "findKnowRevi_el.action", success: function (data,msg) { if(msg == "success"){ window.location.href="<%=basePath %>findKnowRevi_el.action?"+"workOrderTDTO1.keyword=" + escape($('#keyword').val()) + "&workOrderTDTO1.title=" + escape($('#title').val())+ "&workOrderTDTO1.content=" + escape($('#content').val()); } }, error: function (XMLHttpRequest, textStatus, thrownError) { alert('模块加载异常！'); } }); }); $('#reset').click(function(){ $('#keyword').val(""); $('#title').val(""); $('#content').val(""); }); $(".review_button").click(function(){ var id ; $("#myModalLabel_content").text("知识反馈"); var str=$(this).attr("name"); strs=str.split(","); //字符分割 for (i=0;i<strs.length ;i++ ){ $("#txt_title_details").val(strs[0]); $("#txt_clicks_details").val(strs[1]); $("#txt_committime_details").val(strs[2]); $("#txt_content_details_sub").val(strs[3]); id =strs[4]; }; $('#myModal_content').modal(); $("#button_sub").removeClass("hidden"); $("#button_sub").addClass("modal-footer"); $("#btn_submit_content").click(function(){ $.ajax({ type: "POST", url: "agreeExamine.action", data: "knowledge.id=" +id, success: function (data,msg) { if(msg == "success"){ $('#myModal_content').modal('hide'); window.location.href="<%=basePath %>findKnowRevi_el.action"; toastr.success('审核成功'); } }, error: function (XMLHttpRequest, textStatus, thrownError) { alert('模块加载异常！'); } }); }); $("#btn_refuse").click(function(){ $.ajax({ type: "POST", url: "deleteKnowExamine.action", data: "id=" +id, success: function (data,msg) { if(msg == "success"){ $('#myModal_content').modal('hide'); window.location.href="<%=basePath %>findKnowRevi_el.action"; toastr.success('拒绝通过'); } }, error: function (XMLHttpRequest, textStatus, thrownError) { alert('模块加载异常！'); } }); }); }); $(".details_button").click(function(){ var str=$(this).attr("name"); strs=str.split(","); //字符分割 for (i=0;i<strs.length ;i++ ){ $("#txt_title_details").val(strs[0]); $("#txt_clicks_details").val(strs[1]); $("#txt_committime_details").val(strs[2]); $("#txt_content_details_sub").val(strs[3]); }; $("#myModalLabel_content").text(""); $('#myModal_content').modal(); $("#button_sub").addClass("hidden"); }); </script> </html>