即点即改

<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>

 

 

 

<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>