码迷,mamicode.com
首页 > Web开发 > 详细

jquery+ajax实现表格修改行操作

时间:2017-02-27 13:13:20      阅读:770      评论:0      收藏:0      [点我收藏+]

标签:enum   成功   form   class   host   else   提交   oda   pretty   

大体思路

每一行的 <tr> 标签都将其 id 赋值成对应在数据库记录中的主键值;
点击编辑按钮时,将该行的 id 值传给 js 函数,作为更新时的条件;
当在编辑界面输入更新的数据后,点击更新按钮时,将新的数据传给 js 函数;
将 这一行的 id 值,也就是对应记录的主键和编辑后的更新数据,封装成 json 通过 ajax 传递给后台;
剩下的就交给后台...
刷新界面即可;

实例演示

技术分享
 
获取改行的id,先存起来;
  1. //获取待更改指标的id
  2. function getZBId(obj){
  3. temp = $(obj).attr("optionId");
  4. }

技术分享
点击提交按钮后,将之前获取的 id 和更新后的数据,传给后台;

  1. //编辑指标名称
  2. function editZB(obj){
  3. var zbId = temp;
  4. var zbName = $("#zb_name").val();
  5. var strJson={};
  6. strJson.id=zbId;
  7. strJson.name=encodeURIComponent(zbName);
  8. $.ajax({
  9. type:"get",
  10. url:"http://localhost:8080/DemoPlatform/zb-UpdateZB.action",
  11. data:strJson,
  12. dataType:"jsonp",
  13. error:function(error){
  14. swal("失败","更新指标失败","question");
  15. },
  16. success:function(data){
  17. if(data.success === 1){
  18. swal("更新成功","成功更新指标名称","success");
  19. $(‘#zbBody‘).html(‘‘);
  20. getZBsByPage();
  21. $(‘#editZB‘).modal(‘hide‘);
  22. }else{
  23. swal("更新失败","未成功更新指标名称","error");
  24. }
  25. }
  26. });
  27. }

 









jquery+ajax实现表格修改行操作

标签:enum   成功   form   class   host   else   提交   oda   pretty   

原文地址:http://www.cnblogs.com/mario-nb/p/6473184.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!