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

Posted 2020-09-01

大体思路

每一行的 <tr> 标签都将其 id 赋值成对应在数据库记录中的主键值；

点击编辑按钮时，将该行的 id 值传给 js 函数，作为更新时的条件；

当在编辑界面输入更新的数据后，点击更新按钮时，将新的数据传给 js 函数；

将 这一行的 id 值，也就是对应记录的主键和编辑后的更新数据，封装成 json 通过 ajax 传递给后台；

剩下的就交给后台...

刷新界面即可；

实例演示

 

获取改行的id，先存起来；

        //获取待更改指标的id
        function getZBId(obj){
            temp = $(obj).attr("optionId");
        }

点击提交按钮后，将之前获取的 id 和更新后的数据，传给后台；

//编辑指标名称
        function editZB(obj){
            var zbId = temp;
            var zbName = $("#zb_name").val();
            var strJson={};
            strJson.id=zbId;
            strJson.name=encodeURIComponent(zbName);
            $.ajax({
                type:"get",
                url:"http://localhost:8080/DemoPlatform/zb-UpdateZB.action",
                data:strJson,
                dataType:"jsonp",
                error:function(error){
                    swal("失败","更新指标失败","question");
                },
                success:function(data){
                    if(data.success === 1){
                        swal("更新成功","成功更新指标名称","success");
                        $(‘#zbBody‘).html(‘‘);
                        getZBsByPage();
                        $(‘#editZB‘).modal(‘hide‘);
                    }else{
                        swal("更新失败","未成功更新指标名称","error");
                    }
                }
            });
        }