首页 > 代码库 > jquery+ajax实现表格修改行操作

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

2024-09-06 05:26:20   218人阅读

大体思路

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

 









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


联系
我们