js增删改查

浏览数：25 / 时间：2015年06月09日

  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="width: 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="width:20px">序号</th>
 18                 <th style="width:60px">部门</th>
 19                 <th style="width:60px">添加日期</th>
 20                 <th style="width:60px">添加人</th>
 21                 <th style="width: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                 &nbsp; | &nbsp; <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>