jquery实现可编辑型表单效果代码编写

1、效果图


2、代码

<style>
			/*common css begin*/
			*{margin:0px;padding:0px;}
			body{font-family: 微软雅黑,Microsoft yahei,Arial,Verdana,Tahoma,sans-serif; font-size: 12px;}
			a { color: #666; text-decoration: none; cursor: pointer; }
			a, input { outline: none; }
			.fl { float: left; }
			.fr { float: right; }
			.clearfix:after{content:"";display:block;clear: both;}
			/*common css end*/
			.content{margin:10px;}
			.label{float:left;}
			.name{float:left;}
			.edit-info{float:left;display: none;}
			.edit-box{float:left;margin-left:10px;}
			.edit-box a{color:#337FE5;}
			.edit-box a.btn-finish{display: none;}
		</style>
		<div class="content">
			<div class="label">用户名：</div>
			<div class="name">张三</div>
			<div class="edit-info">
				<input type="text" class="input"/>
			</div>
			<div class="edit-box">
				<a href="javascript:;" class="btn-edit">编辑</a>
				<a href="javascript:;" class="btn-finish">完成</a>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script>
			$(function(){
				$(".btn-edit").click(function(){
					$(this).hide();
					$(this).parents(".content").find(".name").hide();
					$(this).parents(".content").find(".btn-finish").show();
					$(this).parents(".content").find(".edit-info").show();
				})
				$(".btn-finish").click(function(){
					var inner=$(this).parents().find(".edit-info .input").val();
					if(inner==""){
						$(this).parents(".content").find(".name").html("张三");
					}else{
						$(this).parents(".content").find(".name").html(inner);
					}
					$(this).hide();
					$(this).parents(".content").find(".name").show();
					$(this).parents(".content").find(".btn-edit").show();
					$(this).parents(".content").find(".edit-info").hide();
				})
			});
		</script>