即点即改

1. <table border="1">  
2.            <tr>  
3.                <td>姓名</td>  
4.            </tr>  
5.            <?php foreach($user as $k=>$v){?>  
6.            <tr>  
7.                <td>  
8.                    <span id="name" <span style="color:#FF0000;">b="<?php echo $v['user_id']?>"</span>><?php echo $v['user_name']?></span>  
9.                </td>  
10.            </tr>  
11.            <?php }?>  
12.        </table>  

 

 

 

1. <script>  
2.    $(document).on('click','#name', function () {  
3.        //获取当前对象  
4.        var obj = $(this);  
5.        //获取当前数据唯一ID  
6.        var user_id = obj.attr('b');  
7.        //获取当前操作文本的内容  
8.        var qian = obj.text();  
9.        // 将当前文本内容替换为文本框并给它默认原来的值  
10.        obj.parent().html("<input type=\"text\" id='text' value= '"+qian+"' />");  
11.        //获得文本框焦点  
12.        $("#text").focus();  
13.        //给文本框一个失去焦点事件  
14.        $("#text").blur(function(){  
15.            //获取你在文本框李输入的值  
16.            var hou = $("#text").val();  
17.            //ajax修改数据库  
18.            $.get('?r=jdjg/gai',{user_name:hou,user_id:user_id},function(res){  
19.   
20.                if(res == 1){  
21.                    //修改数据成功时，将文本框改为span标签，并显示修改后的值  
22.                    $('#text').parent().html("<span id='name'>"+hou+"</span>");  
23.                }else{  
24.                    alert("修改失败")  
25.                }  
26.            })  
27.        })  
28.    })  
29. </script> 

转载于:https://www.cnblogs.com/findher/p/10610536.html