修复表的大小，即使在CSS中“显示无或块”

I have this HTML code:

我有这个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>

This is the code of the functions called by javascript :

这是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";
}

When i click on a radio box, I want the input under it to display so when I click on the radio button the number of lines of the table changes. In other words, when I open my page on the first time, I have no input appear so I choose a radio button to give me an input to fill it... So the width of my td changes. Any solution?

当我点击一个收音机盒时,我希望它下面的输入显示,所以当我点击单选按钮时,表格的行数会发生变化。换句话说,当我第一次打开我的页面时,我没有输入,所以我选择一个单选按钮给我一个输入来填充它...所以我的td的宽度改变了。有解决方案吗

2 个解决方案

#1

You write that your problem is that the width of your <td> changes once an <input> is added. My suggestion would be to give your <td> a default width using CSS that's larger than the width of the <input> (200px is just an example, you can change it as appropriate):

你写的问题是,一旦添加,你的的宽度就会改变。我的建议是使用大于宽度的CSS给你的一个默认宽度(200px只是一个例子,你可以根据需要改变它):

#tabmenu td {width:200px;}

Also, you can simplify your functions into one by making the id an argument:

此外,您可以通过将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";
}

#2

Try to use style.visibility = "hidden" and style.visibility = "visible" instead!

尝试使用style.visibility =“hidden”和style.visibility =“visible”代替!

#1