我有这样的HTML代码:
<form:form method="get" action="${pageContext.request.contextPath}/get_info">
<table id="tabmenu">
<tr>
<td><input type="radio" name="choice" id="np" onClick="Affichenp();"/>Nomet Prenom</td>
<td><input type="radio" name="choice"id="ns" onClick="Afficheppr();"/>Numérode somme</td>
<td><input type="radio" name="choice" id="cn" onClick="Affichecin();"/>CIN</td>
</tr>
<tr>
<td><input type="text" name="nom" id="nom" class="round default-width-input" /></td>
<td><input type="text" name="ppr" id="ppr" class="round default-width-input" /></td>
<td><input type="text" name="cin" id="cin" class="round default-width-input" /></td>
<td><input class="button round blue image-right ic-right-arrow" type="submit" value=""></td>
</tr>
</table>
</form:form>
这是javascript调用的函数代码:
<script type="text/javascript">
function Affichenp() {
document.getElementById("nom").style.display = "block";
document.getElementById("ppr").style.display = "none";
document.getElementById("cin").style.display = "none";
}
function Afficheppr() {
document.getElementById("nom").style.display = "none";
document.getElementById("ppr").style.display = "block";
document.getElementById("cin").style.display = "none";
}
function Affichecin() {
document.getElementById("nom").style.display = "none";
document.getElementById("ppr").style.display = "none";
document.getElementById("cin").style.display = "block";
}
当我单击一个单选框时,我希望它下面的输入显示,所以当我单击单选按钮时,表的行数发生了变化。换句话说,当我第一次打开我的页面时,我没有出现任何输入,所以我选择了一个单选按钮来给我一个输入来填充它……所以td
的宽度改变了。有解决方案吗?
尝试使用style.visibility = "hidden"
和style.visibility = "visible"
代替!
您写的问题是,一旦添加了<input>
, <td>
的宽度就会发生变化。我的建议是给你的<td>
一个默认的宽度使用CSS比<input>
的宽度大(200px
只是一个例子,你可以适当地改变它):
#tabmenu td {width:200px;}
还可以通过将id
作为参数将函数简化为一个:
function Affiche(id) {
document.getElementById("nom").style.display = "none";
document.getElementById("ppr").style.display = "none";
document.getElementById("cin").style.display = "none";
document.getElementById(id).style.display = "block";
}