jquery 即点即改......._ajax即点即改-CSDN博客

本文链接：https://blog.csdn.net/mkbug/article/details/52768633

HTML页面：

<body>  
    <table border="1">  
        <tr>  
            <td>名称</td>  
            <td>价格</td>  
            <td>操作</td>  
        </tr>  
        @foreach($users as $v)  
        <tr>  
            <td value="{{$v->id}}"><span class="name">{{$v->name}}</span></td>  
            <td >{{$v->price}}</td>  
                <td>  
                           <a href="del?id={{$v->id}}">删除</a>  
                           <input type="checkbox" name="checkbox[]" value="{{$v->id}}" />  
                       </td>  
        </tr>  
        @endforeach  
    </table>  
  
</body>  
</html>  
<script type="text/javascript" src="../public/js/jquery-1.7.2.min_js"></script>  
<script>  
    $(document).on('click','span',function(){    
         old_val=$(this).html();    
        $(this).parent().html("<input type=\'text\' value="+old_val+">");    
        $(document).on('blur','input',function(){    
        var obj=$(this);    
        var id=$(this).parent().attr('value'); //获取要修改内容的id    
        var val=$(this).val(); //获取修改后的值  
          $.ajax({    
            type:'post',    
            url:'update',    
            data:{    
                id:id,    
                val:val  
            },    
            success:function(msg){    
                if(msg == 1){    
                    obj.parent().html("<span class='name'>"+val+"</span>")    
                }else{    
                    obj.parent().html("<span class='name'>"+old_val+"</span>")    
                }    
    
            }    
       })    
    })    
})    
</script>

php页面


 public function update(){  
        $id=$_POST['id'];  
        $name=$_POST['name'];    
        $price=$_POST['val'];        
        $re=DB::table('goods')  
                 ->where('id', $id)  
                 ->update([  
                'name' => $price,  
         ]);  
         if($re){  
               echo 1;  
         }  
}