编辑前状态：
实际上，我们看到的编辑前的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>