jquery 即点即改

//在html中建立表单。

<table border="">  
    <th>编号</th>  
    <th>用户名</th>  
    <th>密码</th>  
    <?php foreach($i as $v){ ?>  
    <tr>  
        <td><?php echo $v['id']?></td>  
        <td value="<?php echo $v['id']?>"><span class="name"><?php echo $v['name']?></span></td>  
        <td><?php echo $v['pwd']?></td>  
    </tr>  
    <?php } ?>  
</table>  

//以下是jquery代码。

 

<script>  
  
    $(document).on('click','span',function(){  
         old_val=$(this).html();  
        $(this).parent().html("<input type=\'text\' value="+old_val+">");  
        $('input').focus();  
    })  
  
    $(document).on('blur','input',function(){  
        var obj=$(this);  
        var id=$(this).parent().attr('value'); //获取要修改内容的id  
        var val=$(this).val(); //获取修改后的值  
        $.ajax({  
            type:'post',  
            url:'index.php/welcome/upd_pro',  
            data:{  
                id:id,  
                val:val  
            },  
            success:function(msg){  
                if(msg == 1){ 
                    $('td[value='+id+']').parent().html("<span class='name'>"+val+"</span>")  
                }else{  
                    obj.parent().html("<span class='name'>"+old_val+"</span>")  
                }  
  
            }  
        })  
    })  
</script>

//$('td[value='+id+']').parent().children().eq(2).html(" <td><span>"+val+"</span></td>")