TP5+jquery即点既改-优快云博客

本文介绍了一种使用jQuery实现表格中数据项双击即改的功能，并详细展示了前后端交互流程，包括前端如何捕捉双击事件并发送修改请求，以及后端如何接收这些请求并更新数据库。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//表单

 {volist name="date" id="v"}
<tr id="{$v.id}">
          <td><input type="checkbox" name="box"/></td>
           <td fd="id">{$v.id}</td>
          <td fd="name">{$v.name}</td>
          <td fd="time">{$v.time}</td>
          <td fd="zhuchi">{$v.zhuchi}</td>
          <td fd="zhuang">{$v.zhuang}</td>
          <td fd="info">{$v.info}</td>
          <td><img src=" __TU__/{$v.tu}" width="100px" height="100px"  alt=""/></td>
          <td>{$v.f_fen}</td>
        
</tr>
 {/volist}


//js jquery实现

<script>
    //即点即改
    $(document).ready(function(){
        $("td").dblclick(function () {
            //alert("1");htm括号不写东西是取值，写了东西是替换
            var td_val=$(this).text();
            var fd_val=$(this).attr("fd");
            var id_val=$(this).parents().attr("id");
            $(this).html("<input type='text' id='dian"+td_val+fd_val+id_val+"' value='"+td_val+"'>");
            $("#dian"+td_val+fd_val+id_val).blur(function(){
                var new_val=$(this).val();
                $(this).parents("td").html(new_val);
                //请求     此为post传值
                $.post("__URL__/dian",
                    {
                        text_id:id_val,
                        fd:fd_val,
                        val:new_val
                    },
                    function(data,status){
                         console.log(data);
                 })
            });
        });
    });
</script>


//控制器层

//即点既改
public function dian()
{
    $id = Request::instance()->param('text_id');//ID值
    $fd = Request::instance()->param('fd');    //字段名字
    $val = Request::instance()->param('val');//值
    $data[$fd] = $val;
    Db::table('lanmu')->where('id', $id)->update($data);
}