即点即改jq操作

最新推荐文章于 2022-03-07 00:01:54 发布

原创最新推荐文章于 2022-03-07 00:01:54 发布 · 149 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用jQuery实现网页表格中的数据动态编辑功能，包括鼠标双击事件触发编辑、输入框焦点处理、数据更新及AJAX请求实现，确保数据修改的实时性和准确性。

首先给要修改的值一个标签,把要修改的值包裹住，在span标签父及td上需要定义
2个类型分别存储

fd=‘id’ 是每条数据自己的id，下面修改需要根据id进行修改
oldname=‘原始值’，下面判断修改失败就返回原始值
//$(document).on(‘click’,‘要选择的元素’,function(){})
//如果动态创建的元素在该选择器选中范围内是能触发回调函数
//dblclick 鼠标双击事件
//click 鼠标单击事件

$(document).on('dblclick','.sp',function(){               //当span标签被点击是触发
    var txt=$(this).text();                               //获取span标签里的 值
    $(this).parent().html("<input class='as' type='text' value='"+txt+"' class='as'>");
    //把span 标签换成  input框   并把span标签里的值 附上去
    $(".as").focus();  //给到input框的焦点

});
//极点及改 当鼠标移出事件
$(document).on('blur','.as',function(){            
    var val = $(this).val();                 //当鼠标移出获取文本框里的值
    var id =$(this).parents('td').attr('fd');//当鼠标移出获取文本框的父类td里的fd(修改内容的id)
    //attr 是返回被选中的属性值
    var oldname =$(this).parents('td').attr('oldname'); 
    //获取input框的父类td 里的 oldname（修改前的值）
    var __token__=$("#__token__").val();       //这个是放CSRF注入的token令牌不用写
    var obj=$(this);                                           //随便定义个obj附上  input 框的值
    $.ajax({                                                      //ajax 传值修改
        type: "post",
        url: "{:url('upd')}",                               
        data: {
            type:'post',
            name:val,                                       //传修改的val(也就是现在input框的值)和修改的id
            id:id,
            __token__:__token__,                    //传token  不用注意
        },
        dataType:"json",
        success: function(msg){                   //判断修改是否成功
           if (msg.status=="yes"){                 
               obj.parent().html("<span class='sp'>"+val+"</span>");
               //成功则获取先前定义obj(input)的父类，替换回span标签把修改后的值附上
           } else if(msg.status=="no"){
               obj.parent().html("<span class='sp'>"+oldname+"</span>");
               //失败则获取先前定义obj(input)的父类，替换回span标签把修改前的值附上
           }
           token();
        }
    });
});