Question

使用Javascript：

<script>
function showMe(){
document.querySelector('#change').style.display = '';
document.querySelector('#keep').style.display = 'none'
document.querySelector('#change1').style.display = '';
document.querySelector('#keep1').style.display = 'none'
document.querySelector('#change2').style.display = '';
document.querySelector('#keep2').style.display = 'none'
document.querySelector('#change3').style.display = '';
document.querySelector('#keep3').style.display = 'none'
document.querySelector('#change4').style.display = '';
document.querySelector('#keep4').style.display = 'none'
}
</script>

HTML code：

<table class="table table-user-information">
<tbody>
<tr>
<td>Name:</td>
<td><span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></td> 
</tr>
<tr>
<td>Date of Birth</td>
<td><span id= "keep1">01/24/1988</span><input id= "change1" value= "11/14/2016" style= "display:none;"></td>
</tr>
<tr>
<tr>
<td>Gender</td>
<td><span id= "keep2">Female/Male</span><input id= "change2" value= "Female" style= "display:none;"></td>
</tr>
<tr>
<td>Country</td>
<td><span id= "keep3">US</span><input id= "change3" value= "US" style= "display:none;"></td>
</tr>
<tr>
<td>Email</td>
<td><span id= "keep4"><a href="mailto:info@support.com">info@support.com</a></span><input id= "change4" value= "Email" style= "display:none;"></td>
</tr>

</tbody>
</table>
</div>
</div>
</div>
<div class="panel-footer">
<a data-original-title="Broadcast Message" data-toggle="tooltip" type="button" class="btn btn-sm btn-primary"><i class="glyphicon glyphicon-envelope"></i></a>
<span class="pull-right">
<a href="#" data-original-title="Edit this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-warning" onclick = 'showMe()'><i class="glyphicon glyphicon-edit"></i></a>
<a data-original-title="Save this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-success"><i class="glyphicon glyphicon-saved"></i></a>
</span>
</div>

点击保存按钮后，如何使编辑保存好？此外，当我点击编辑时，表格变得更大，我尝试在编辑之前和之后将字体大小更改为相同但是它没有用，这似乎是什么问题？

Answer 1

那是因为你用250px填充左margin: 0 auto;。如果您想将它们居中，可以使用@media。此外，您只能使用this查询为移动设备添加css（请参阅更多信息https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries）

通过javascript编辑后保存，并调整问题

1 个答案: