欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

PHP+jQuery实现双击修改table表格

程序员文章站 2022-03-18 15:40:04
//双击触发事件 $("tbody>tr>td").dblclick(function(){ //获取到 当前 input 下的元素(原值) window.olds = $(this).children('input').val(); if(olds==undefined) { r... ......
<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;
}