Jquery即点即改

[php] view plain copy

1. <table border="">  
2.     <th>编号</th>  
3.     <th>用户名</th>  
4.     <th>密码</th>  
5.     <?php foreach($i as $v){ ?>  
6.     <tr>  
7.         <td><?php echo $v['id']?></td>  
8.         <td value="<?php echo $v['id']?>"><span class="name"><?php echo $v['name']?></span></td>  
9.         <td><?php echo $v['pwd']?></td>  
10.     </tr>  
11.     <?php } ?>  
12. </table>  

[html] view plain copy

1. <script>  
2.   
3.     $(document).on('click','span',function(){  
4.          old_val=$(this).html();  
5.         $(this).parent().html("<input type=\'text\' value="+old_val+">");  
6.         $('input').focus();  
7.     })  
8.   
9.     $(document).on('blur','input',function(){  
10.         var obj=$(this);  
11.         var id=$(this).parent().attr('value'); //获取要修改内容的id  
12.         var val=$(this).val(); //获取修改后的值  
13.         $.ajax({  
14.             type:'post',  
15.             url:'index.php/welcome/upd_pro',  
16.             data:{  
17.                 id:id,  
18.                 val:val  
19.             },  
20.             success:function(msg){  
21.                 if(msg == 1){  
22.                     $('td[value='+id+']').parent().html("<span class='name'>"+val+"</span>")  
23.                 }else{  
24.                     obj.parent().html("<span class='name'>"+old_val+"</span>")  
25.                 }  
26.   
27.             }  
28.         })  
29.     })  
30.   
31. /***************************************  
32. <pre name="code" class="html">$(document).on('click','span',function(){  
33.     var old_val=$(this).html();  
34.     $(this).parent().html("<input type=\'text\' value="+old_val+">");  
35.     $('input').focus();  
36.   
37.     $('input').blur(function(){  
38.         var obj=$(this);  
39.         var id=$(this).parent().attr('value'); //获取要修改内容的id  
40.         var val=$(this).val(); //获取修改后的值  
41.         $.ajax({  
42.             type:'post',  
43.             url:'index.php/welcome/upd_pro',  
44.             data:{  
45.                 id:id,  
46.                 val:val  
47.             },  
48.             success:function(msg){  
49.                 if(msg == 1){  
50.                     obj.parent().html("<span class='name'>"+val+"</span>")  
51.                 }else{  
52.                     obj.parent().html("<span class='name'>"+old_val+"</span>")  
53.                 }  
54.   
55.             }  
56.         })  
57.     })  
58.   
59. })  

</script>