1 <body> 2 <div class="main"> 3 </div> 4 <div> 5 <form id="form1" action="<c:url value="/listPdept.do"/>" method="post" autocomplete="off"></form> 6 <table style=" 50%"> 7 <tr> 8 <td style="text-align: center; " > 9 部门名称：<input type="text" name="name" id="name"> <input type="button" id="login" value="添加 " onclick="addData()"> 10 </td> 11 <td style="text-align: right;"><input type="button" value="刷新" onclick="reflush()"/></td> 12 </tr> 13 </table> 14 </div> 15 <table class="grid"> 16 <tr> 17 <th style="20px">序号</th> 18 <th style="60px">部门</th> 19 <th style="60px">添加日期</th> 20 <th style="60px">添加人</th> 21 <th style="60px">操作</th> 22 23 </tr> 24 <c:forEach items="${list}" var="model" varStatus="num"> 25 <tr> 26 <td>${num.index+1}</td> 27 <td id="td${num.index}"> ${model.name}</td> 28 <td> 29 <fmt:formatDate value="${model.createtime}" pattern="yyyy-MM-dd"/> 30 </td> 31 <td>${model.creatorId+1}</td> 32 <td> 33 <a href="javascript:void(0);" onclick="update('${model.id}','${num.index}')">修改</a> 34 | <a href="javascript:void(0);" onclick="deleteData('${model.id}','${num.index}')">删除</a> 35 </td> 36 </tr> 37 </c:forEach> 38 </table> 39 <div> 40 </div> 41 42 <script type="text/javascript"> 43 44 function deleteData(order){ 45 if(confirm ("您确定要删除此部门吗？")){ 46 $.ajax({ 47 url: "<c:url value="/deletePdept.do"/>", 48 type: "post", 49 data: {id: order}, 50 dataType: "text", 51 success: function (data) { 52 if (data == "success") { 53 alert("修改成功！"); 54 reflush(); 55 }else{ 56 alert("删除失败！"); 57 } 58 } 59 }); 60 return ; 61 }else{ 62 alert("删除失败！"); 63 } 64 } 65 function update(order, indexa) { 66 var obj = document.getElementById("td"+indexa); 67 var intext = obj.innerHTML; 68 obj.innerHTML="<input type='text' name='text"+indexa+"' value='"+intext+"' onblur= "updateData('"+order+"','"+indexa+"')"/>" 69 // alert(obj.innerHTML); 70 } 71 function updateData(order,indexa){ 72 var result =$("input[name='text"+indexa+"']").val();//获得修改内容 73 result = $.trim(result); 74 $.ajax({ 75 url: "<c:url value="/updatePdept.do"/>", 76 type: "post", 77 data: {id: order, name: result}, 78 dataType: "text", 79 success: function (data) { 80 if (data == "success") { 81 alert("修改成功！"); 82 var obj = document.getElementById("td"+indexa); 83 obj.innerHTML=result; 84 }else{ 85 alert("修改失败！"); 86 } 87 } 88 }); 89 } 90 function addData(){ 91 var result =$("input[name='name']").val();//获得修改内容 92 result = $.trim(result); 93 if (!result){ 94 alert("请输入！"); 95 }else{ 96 $.ajax({ 97 url: "<c:url value="/addPdept.do"/>", 98 type: "post", 99 data: {name: result}, 100 dataType: "text", 101 success: function (data) { 102 if (data == "success") { 103 alert("添加成功！"); 104 $("#form1").submit(); 105 }else{ 106 alert("添加失败！"); 107 } 108 } 109 }); 110 } 111 112 } 113 114 function reflush(){ 115 $("#form1").submit(); 116 } 117 </script> 118 </body>