设为首页 加入收藏

TOP

PHP+jQuery实现双击修改table表格
2019-09-17 18:20:01 】 浏览:17
Tags:PHP jQuery 实现 双击 修改 table 表格
<td signs="name">
    <input type="text" disabled="disabled" readonly="readonly" value="{$res.section}" >
</td>
 //双击触发事件
    $("tbody>tr>td").dblclick(function(){
        //获取到 当前 input 下的元素(原值)
        window.olds = $(this).children('input').val();
        if(olds==undefined)
        {
            return false;
        }
        var signs = $(this).attr('signs'); //获取属性值(这些值方便php后台的操作)
//        console.log(signs);
        var user_id = $(this).parent().attr("id"); //接受当前点击的ID(tr里的id)
//        console.log(user_id);
        //双击之后可以修改
        $(this).find('input').attr("disabled",false);
        $(this).find('input').attr("readonly",false);
        $(this).find('input').css("border",'1px solid deepskyblue');
        $(this).find('input').attr('id', signs + "_" + user_id);  //方便下面失去焦点事件 找ID(没有这个无法定位到tr里面的id属性)
        //循环这些值从而判断是修改数据的类型,对一些特殊类型的数据进行特殊处理
        switch(signs){
            case 'name':
                $("#" + signs + "_" + user_id).focus().on("blur",function(){
                    var content = $(this).val();
//                    console.log(content);
                    if(content!=olds)  //与原值不同则传到后台
                    {
                        // alert(user_id);alert(signs);alert(content);
                        /*
                        通过getJSON将数据传输到后台
                        USER_ID
                        SIGNS
                        CONTENT
                        */
                        $.ajax({
                            type:"post",    // 请求类型
                            url:"{:url('Sections/update')}",    // 请求URL
                            data:{id:user_id,val:content},    // 请求参数 即是 在Servlet中 request.getParement();可以得到的字符串
                            dataType:"json",    // 数据返回类型
                            cache:false, // 是否缓存
                            async:true,    // 默认为true 异步请求
                            success:function(result){    // 成功返回的结果(响应)
                                console.info(result);
                                if(result){
//                                    alert('22213');
                                }else{
//                                    alert('1111');
                                }
                            }
                        });
                    }
                    $(this).attr('disabled', 'disabled');
                    $(this).attr('readonly', 'readonly');
                    $(this).css('border', '0');
                    $(this).css('background', '#fff');
                    $(this).css('text-align', 'center');
                });
                break;
        }
    })
    public function update()
    {
        $datas=input('post.');
        $id = $datas['id'];
        $name = $datas['val'];
        $res = $this->section->updates($datas);
        echo json_encode($res);

    }
/**
* 修改
*/
public function updates($data)
{

$Section = new Section;
$res = $Section->save([
'section' => $data['val'],
],['id' => $data['id']]);

return $res;
}




 

】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇Spark2.1.0——内置Web框架详解 下一篇[笔记][SQL] 连接join

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目