当用户点击编辑按钮时input变成可编辑状态

最新推荐文章于 2023-10-16 21:50:35 发布

weixin_30571465

最新推荐文章于 2023-10-16 21:50:35 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/phpcode/archive/2012/05/09/2522770.html

本文详细介绍了如何在网页上实现类似51job的在线简历编辑功能，包括编辑前后的样式变化及JavaScript触发机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类似51job网上，用户点击编辑后，个人信息可以编辑的功能。

编辑前状态：

实际上，我们看到的编辑前的input添加了以下样式：


.readonly{
border:none; 
background-color:inherit
}

所以看上去，是没有边框的，而且背景色继承了父容器的颜色。

-------------------------------------------------------------

当用户点击“编辑”按钮后

点击“编辑按钮”会触发以下js：

$('#editMyBasicInfoBtn').click(function(){
				 $(this).parents('form') // For each element, pick the ancestor that's a form tag.
					   .find(':input') // Find all the input elements under those.
					   .each(function(i) {
						$(this).prop("readonly",false);
						$(this).removeClass("readonly");
				});
				
			});

以上代码会移除.readonly样式.所以表单看起来变成了可编辑状态。

而真正控制表单input能不能编辑的属性是readonly="readonly".

-------------------------------------------------------------

以下是完整代码，将以下代码保存为test.html即可测试效果。


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script>
<script >
$(document).ready(function() {
//Edit My Basic Info Btn click will trigger this 
			$('#editMyBasicInfoBtn').click(function(){
				 $(this).parents('form') // For each element, pick the ancestor that's a form tag.
					   .find(':input') // Find all the input elements under those.
					   .each(function(i) {
						$(this).prop("readonly",false);
						$(this).removeClass("readonly");
				});
				
			});
});
</script>
<style type="text/css">
body{
color: black;

}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;

font: 9px Verdana,"Lucida Grande",Tahoma,Geneva,Arial,Helvetica,sans-serif;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}

tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
td.label {
padding: 0.1em 0.5em;
white-space: nowrap;
line-height: 100%;
background-color:#CCCCCC;
}

td, th {
display: table-cell;
vertical-align: inherit;
}
td.value {
padding: 0.1em 0.5em;
white-space: nowrap;
line-height: 120%;
}

.readonly{
border:none; 
background-color:inherit
}
</style>
</head>
<body>
<h2>Basic Information</h2>
<form action="" method="post" id="myBasicInfo">
<table cellspacing="0" cellpadding="0" border="0">
  <tbody>
    <tr>
      <td class="label">Employee ID:</td>
      <td class="value">
	  <input type="text" name="empID" name="empID" value="21233333" size="40" maxlength="1000"  readonly="readonly"  class="readonly" /></td>
      <td class="label">Employee Name:</td>
      <td class="value"><input type="text" name="empName" name="empName" value="Henry Poter" size="40" maxlength="1000" class="readonly" /></td>
    </tr>
	<tr>
      <td class="label">Gender:</td>
      <td class="value"><input type="text" name="gender" value="Male" size="40" maxlength="1000"  readonly="readonly" class="readonly"></td>
   
      <td class="label">Birthday:</td>
      <td class="value"><input type="text" name="birthday" value="1988-08-08" size="40" maxlength="1000" class="readonly"></td>
    </tr>
	
    <tr>
      <td class="label">Email:</td>
      <td class="value"><input type="text" name="email" value="admin@phpcode8.com" size="40" maxlength="1000"  readonly="readonly" class="readonly"></td>
  
      <td class="label">Mobile Phone:</td>
      <td class="value"><input type="text" name="mobile" value="" size="40" maxlength="1000" class="readonly"></td>
    </tr>
	<tr>
      <td ></td>
      <td class="value"><input type="button" value="Edit" id="editMyBasicInfoBtn" name="editMyBasicInfoBtn" /> <input type="submit" value="Save" /><input type="reset" value="Cancel"  /></td>
	  <td ></td>
	  <td ></td>
    </tr>
  </tbody>
</table>
</form>
</body>
</html>

转载于:https://www.cnblogs.com/phpcode/archive/2012/05/09/2522770.html