【即点即改】关于PHP即点即改的一些东西

 该文章为本人在学习PHP时的一些小知识，如有不足之处请指正

首先呢 ，我们知道即点即改的思路大概就是给你要修改的文本绑定一个点击click事件，

当你点击该文本的时候先把这个文本取到，然后替换成文本框，把取到的文本放到input文本框里，然后光标离开文本框，对比如果文本发送改变即发送Ajax进行后台修改，如果没有发生改动则将旧的文本放回去，我们看代码

//要点击要修改的文本  我们使用事件委托  为的是可以进行多次修改
$(document).on("click",".first-cell span",function(){
	obj = $(this);	        //当前span对象
	old_val = obj.text();	//获取旧值
	var w = obj.width()     //获取当前文本的宽度（也就是span对象的宽度）	
	var h = obj.height()	//获取当前文本的高度
							
	//插入文本框 将旧值放入  让它的高和宽稍微比文本多一点点  而不是全部固定的
	obj.parent().html("<input type="text" value="+old_val+" style="width:"+(w+4)+"px;height:"+(h+2)+"px;border:1px solid blue">")
	
        //将光标获取到放到文本的尾部
	//其原理就是获得焦点后重新把自己复制粘帖一下 
	$(".first-cell input").val("").focus().val(old_val);			
})

这上面的是点击文本的事件    注意：不要将光标离开事件写到上面的时间里面

//光标离开文本框
$(document).on("blur",".first-cell input",function(){
	var input = $(this);        //当前的文本框对象
	var new_val = input.val();	//更改后的新值
	var goods_id = input.parents("tr").attr("id") //获取到当前要修改的ID
	if(old_val==new_val){
		//如果值没有发生改变 将原值放回去
		input.parent().html("<span>"+old_val+"</span>")
	}else{
              //否则发送ajax执行修改   这里我使用的CI框架 ajax的使用方式因人而异
              var url = "<?php echo site_url("admin/Goods/changeName")?>";	//路径
		$.post(url,{"goods_id":goods_id,"goods_name":new_val},function(data){
		   if(data==0){
		   //修改成功	
			input.parent().html("<span>"+new_val+"</span>")
		   }else{
		   //修改失败
		        input.parent().html("<span>"+old_val+"</span>")
		   }
	       })
	}
})

以上的代码已经将即点即改完成了很完美了 ，但是我还觉得有点小缺陷，就是如果以前的文字少，我点击修改后文字非常多了，这样文本框就放不下文字了。很别扭，所以再给它加个时间  ，使之文本框随着插入的文本宽度的变化而变化

想要即时让文本框变化，说明是当我们往文本框里面插入文字后  测量出文本的宽度，把这个宽度赋值给文本框实现的。

然后就是如何用代码实现了，我们知道获取文本的长度是用length，但是length得到的值是文本的字节，而不是我们需要的像素px

，有点同学会说jquery里面有一个width（）方法可以获取，但是我们看手册发现这个方法

是只能够测量匹配到的对象的宽度，而我们得到的值是个字符串。

当然这根本不是什么难题  ，那咱就让他变成一个对象  ，随便找个地方定义一个span标签  ，把它隐藏起来，然后把得到的字符串放

进去然后通过这个类名匹配到这个span标签 ，ok、成功获取到这个span对象 ，女朋友找到了该办正事了

使用css方法将当前的input文本框宽度改变    NICE  完成  请看下面完整代码