即点即改

双击单元格时获取单元中的字段、值和id，将单元格替换成input框，再利用失焦事件获取新值替换旧值，利用ajax方式将获取的字段、id和新值传到控制器，进行拼接，实现修改。

<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
use think\Request;
class Update extends Controller
{
    //展示数据
    public function show(){
        $data = Db::table('yun')->select();
        return view("show",['data'=>$data]);
    }
    //执行修改
    public function update(){
        $fd = Request::instance()->param('fd');
        $v = Request::instance()->param('v');
        $id = Request::instance()->param('id');
        $data[$fd]=$v;
        $a = Db::table('yun')->where('id',$id)->update($data);
        if($a){
            return 0;
        }else{
            return 1;
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展示数据</title>
</head>
<body>
<center>
    <table border="1">
        <tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
        </tr>
        {volist name="data" id="vo"}
        <tr class="{$vo.id}" id="{$vo.id}">
            <td >{$vo.id}</td>
            <td fd="name">{$vo.name}</td>
            <td fd="age">{$vo.age}</td>
            <td fd="address">{$vo.address}</td>
        </tr>
        {/volist}
    </table>
</center>
</body>
</html>
<script src="/static/js/jquery.js"></script>
<script>
   $("td").dblclick(function(){
       //获取td中的值
       var td_val=$(this).html();
       //获取双击过的字段
       var fd_val=$(this).attr('fd');
       //获取id
       var id_val=$(this).parents("tr").attr("id");
       //将td框变成input框
       $(this).html("<input type='text' value='"+td_val+"' id='fj'>");
       $("#fj").blur(function(){
           //获取要修改的值
           var new_val = $(this).val();
           $(this).parents("td").html(new_val);
           $.ajax({
               method:"POST",
               url:"{:url('update/update')}",
               data:{
                   id:id_val,
                   fd:fd_val,
                   v:new_val
               }
           }).done(function(msg){
               if(msg==0){
                   alert("修改成功");
               }else{
                   alert("修改失败");
               }
           });
       });
   });
</script>

猜你喜欢