直接点击取消时,电话号码和邮箱没有变化。点击编辑后,变为输入框,如果不想编辑了,再点击取消,内容恢复原样。
//编辑
function edit(){
//phone,email 变量声明时没有使用var,是全局变量,因为下面的cancel()函数要用到
phone = $("#phone").text();
email = $("#email").text();
$("#phone").html("<input type='text' name='newPhone' id='newPhone' class='form-control' placeholder='请输入电话号码'>");
$("#email").html("<input type='text' name='newEmail' id='newEmail' class='form-control' placeholder='请输入邮箱'>");
}
//取消
function cancel(){
//如果直接点击取消,则内容不变,typeof phone=="object"
//如果点击编辑后在再点击取消,typeof phone=="string" , 既 typeof phone != "object"
var cancelPhone = $("#phone").text();
var cancelEmail = $("#email").text();
if(typeof phone =="object"){
$("#phone").html(cancelPhone);
$("#email").html(cancelEmail);
}else{
$("#phone").html(phone);
$("#email").html(email);
}
}
<tr>
<td>电话</td>
<td><div id="phone">${user.phone }</div></td>
</tr>
<tr>
<td>邮箱</td>
<td><div id="email">${user.email }</div></td>
</tr>
<tr>
<td style="text-align: center;"><button type="button" onclick="cancel()" class="layui-btn layui-btn-normal"><font size="2">取消</font></button></td>
</tr>
<li class="li">
<button onclick="edit()" class="layui-btn layui-btn-normal"><font size="2">编辑</font></button>
</li>
1.直接点击取消,内容没有变化
2.点击编辑,电话和邮箱变为输入框。
3.忽然不想编辑了,点击取消后,内容恢复原样。