1

我有这个 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变化。有什么解决办法吗？

4

2 回答 2

4

尝试使用style.visibility = "hidden"andstyle.visibility = "visible"代替！

于 2013-05-15T18:29:48.817 回答
2

您写道，您的问题是添加<td>an 后宽度会发生变化<input>。我的建议是<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";
}
于 2013-05-15T18:28:29.160 回答