zoukankan      html  css  js  c++  java
  • 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;
    }




  • 相关阅读:
    MySQL删除重复数据
    C#如何实现Object与byte[]的互相转换
    远程桌面连接(转)
    WEB标准学习路程之"CSS":2.字体font
    WEB标准学习路程之"CSS":3.背景Background属性
    WEB标准学习路程之"入门篇":8.XHTML代码规范
    WEB标准学习路程之"CSS":9.常用选择符
    WEB标准学习路程之"CSS":1.什么是样式表
    WEB标准学习路程之"入门篇":9.校验及常见错误
    WEB标准学习路程之"CSS":4.尺寸Dimensions属性
  • 原文地址:https://www.cnblogs.com/wangziyue/p/10449541.html
Copyright © 2011-2022 走看看