jq 即点即改

思路：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
新问题目<input type="text" id="sel">
<input type="button" value="搜索" class="sel">
<table border="1" cellpadding="3" cellspacing="0">
    <thead>
    <tr>
        <td>请选择</td>
        <td>编号</td>
        <td>新闻题目</td>
        <td>状态</td>
        <td>发布人</td>
        <td>封面</td>
        <td>添加时间</td>
        <td>文章内容</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    {volist name="arr" id="v"}
    <tr id="{$v.id}">
        <td><input type="checkbox" name="box" value="{$v.id}"></td>
        <td>{$v.id}</td>
        <td fd="name"><span>{$v.name}</span></td>
        <td fd="state"><span>{$v.state}</span></td>
        <td fd="man"><span>{$v.man}</span></td>
        <td>
            <img src="__STATIC__/uploads/{$v.photo}" style="width: 100px;height: 70px;">
        </td>
        <td>{$v.time}</td>
        <td fd="content"><span>{$v.content}</span></td>
        <td>
            <a href="">删除</a>
            <a href="">修改</a>
        </td>
    </tr>
    {/volist}
    </tbody>

</table>

JQ代码

//即点即改
$(document).on('dblclick','span',function(){
    var txt=$(this).text();
    $(this).parent().html("<input type='text' value='"+txt+"' class='sp'>");
});
$(document).on('blur','.sp',function(){
    var val = $(this).val();
    var id =$(this).parents('tr').attr('id');
    var fd =$(this).parents('td').attr('fd');
    var obj=$(this);
    $.ajax({
        type: "GET",
        url: "{:url('index/upd')}",
        data: {
           val:val,
            id:id,
            fd:fd
        },
        success: function(msg){
            if(msg==1)
            {
                obj.parent().html("<span>"+val+"</span>");
            }
        }
    });
});

更改入库

控制层

//即点即改
public function upd()
{
    $user=new News();
    $fd=input('get.fd');
    $arr[$fd]=input('get.val');
    $arr['id']=input('get.id');
    $res = $user->def($arr);
    if($res)
    {
        return 1;
    }
    else{
        return 0;
    }
}

模板层

//即点即改
public function def($arr)
{
    return $this->update($arr);
}

JQ代码

更改入库

猜你喜欢