jQuery即点即改

 

 

 

1、给你需要修改的数据一个选择器（id或者class）都行

2、因为修改数据库时候需要ID，所以给它一个属性等于你的ID用来传值，我用的是b（这个你可以随意起名）

 <table border="1">
            <tr>
                <td>姓名</td>
            </tr>
            <?php foreach($user as $k=>$v){?>
            <tr>
                <td>
                    <span id="name" <span style="color:#FF0000;">b="<?php echo $v['user_id']?>"</span>><?php echo $v['user_name']?></span>
                </td>
            </tr>
            <?php }?>
        </table>

3、触发点击事件，执行以下代码

<script>
   $(document).on('click','#name', function () {
       //获取当前对象
       var obj = $(this);
       //获取当前数据唯一ID
       var user_id = obj.attr('b');
       //获取当前操作文本的内容
       var qian = obj.text();
       // 将当前文本内容替换为文本框并给它默认原来的值
       obj.parent().html("<input type=\"text\" id='text' value= '"+qian+"' />");
       //获得文本框焦点
       $("#text").focus();
       //给文本框一个失去焦点事件
       $("#text").blur(function(){
           //获取你在文本框李输入的值
           var hou = $("#text").val();
           //ajax修改数据库
           $.get('?r=jdjg/gai',{user_name:hou,user_id:user_id},function(res){

               if(res == 1){
                   //修改数据成功时，将文本框改为span标签，并显示修改后的值
                   $('#text').parent().html("<span id='name'>"+hou+"</span>");
               }else{
                   alert("修改失败")
               }
           })
       })
   })
</script>