Jquery即点即改

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

<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>")
}

}
})
})

/***************************************
<pre name="code" class="html">$(document).on('click','span',function(){
var old_val=$(this).html();
$(this).parent().html("<input type=\'text\' value="+old_val+">");
$('input').focus();

$('input').blur(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){
obj.parent().html("<span class='name'>"+val+"</span>")
}else{
obj.parent().html("<span class='name'>"+old_val+"</span>")
}

}
})
})

})