Строка таблицы не удаляется после нажатия на переключатель

0
<form method="POST" action="insert.php" name="reg" onsubmit="return chkform();">
<table cellspacing="0" cellpadding="0" border="1" width="" align="center">
    <tr>
        <td>
            <label>1. First Name</label>
        </td>
        <td>
            <input type="text" class="" id="fname" name="fname" placeholder="First Name" onfocus="document.getElementById('err1').innerHTML='';" />
        </td>
        <td>
            <label>2. Last Name</label>
        </td>
        <td>
            <input type="text" class="" id="lname" name="lname" placeholder="Last Name" onfocus="document.getElementById('err2').innerHTML='';" />
        </td>
    </tr>
    <tr>
        <td align="right" colspan="2" style="color: red;font-size: 11px;">
            <div class="err" id="err1" style="margin-right: 103px;"></div>
        </td>
        <td align="right" colspan="2" style="color: red;font-size: 11px;">
            <div id="err2"></div>
        </td>
    </tr>
    <tr>
        <td>
            <label>3. Mobile Number</label>
        </td>
        <td>
            <input type="text" class="" id="m_no" name="m_no" onfocus="document.getElementById('err3').innerHTML='';" placeholder="Mobile Number" />
        </td>
        <td>
            <label>4. Alternate Number</label>
        </td>
        <td>
            <input type="text" class="" id="a_no" name="a_no" onfocus="document.getElementById('err4').innerHTML='';" placeholder="Alternate Number" />
        </td>
    </tr>
    <tr>
        <td align="right" colspan="2" style="color: red;font-size: 11px;">
            <div id="err3" style="margin-right: 120px;"></div>
        </td>
        <td align="right" colspan="2" style="color: red;font-size: 11px;">
            <div id="err4"></div>
        </td>
    </tr>
    <tr>
        <td>
            <label>5. Email address</label>
        </td>
        <td colspan="3">
            <input type="email" class="" id="mail" name="mail" onfocus="document.getElementById('err5').innerHTML='';" placeholder="Email id" />
        </td>
    </tr>
    <tr>
        <td align="right" colspan="2" style="color: red;font-size: 11px;">
            <div id="err5" style="margin-right: 120px;"></div>
        </td>
    </tr>
    <tr>
        <td>
            <label>6. Organisation/Designation</label>
        </td>
        <td colspan="3">
            <input type="text" class="" id="designation" name="designation" onfocus="document.getElementById('err6').innerHTML='';" placeholder="Oraganisation" />
        </td>
    </tr>
    <tr>
        <td align="right" colspan="2" style="color: red;font-size: 11px;">
            <div id="err6" style="margin-right: 141px;"></div>
        </td>
    </tr>
    <tr>
        <td>
            <label>7. Industry</label>
        </td>
        <td colspan="3">
            <input type="text" class="" id="industry" name="industry" onfocus="document.getElementById('err7').innerHTML='';" placeholder="Industry" />
        </td>
    </tr>
    <tr>
        <td align="right" colspan="2" style="color: red;font-size: 11px;">
            <div id="err7" style="margin-right: 141px;"></div>
        </td>
    </tr>
    <tr>
        <td colspan="">
            <label>8. Are you a Member?</label>
        </td>
        <td>
            <input type="radio" class="" id="rchk1" name="member" value="yes" checked="true" onclick="chk_register()" />
            <label>Yes</label>
        </td>
        <td>
            <input type="radio" class="" id="rchk2" name="member" value="no" onclick="chk_register()" />
            <label>No</label>
        </td>
        <td></td>
    </tr>
    <tr id="cit">
        <td>
            <label>9. Member City</label>
        </td>
        <td colspan="3">
            <input type="text" class="" id="city" name="city" placeholder="Name of the city" />
        </td>
    </tr>
    <tr>
        <td align="right" colspan="4" style="color: red;font-size: 11px;">
            <div id="err8"></div>
        </td>
    </tr>
    <tr>
        <td colspan="">
            <label>10. Are you an Overseas Delegate?</label>
        </td>
        <td>
            <input type="radio" id="rchk3" value="yes" name="overseas" checked="true" class="" onclick="chk_register1()" />
            <label>Yes</label>
        </td>
        <td>
            <input type="radio" value="no" id="rchk4" name="overseas" class="" onclick="chk_register1()" />
            <label>No</label>
        </td>
        <td></td>
    </tr>
    <tr id="no">
        <td>
            <label>11. How did you hear about it?</label>
        </td>
        <td colspan="3">
            <textarea id="hcon" name="convention_source" value=""></textarea>
        </td>
    </tr>
    <tr>
        <td valign="top">
            <label>12. How would you be paying your delegate fee?</label>
        </td>
        <td valign="top">
            <input type="radio" class="" value="cheque" name="fee" checked="true" />
            <label>Members only)
                <br>cheque payable in name of
                <br>
            </label>
        </td>
        <td>
            <input type="radio" class="" value="bank transfer" name="fee" />
            <label>Bank Transfer</label>
        </td>
        <td></td>
    </tr>
    <tr>
        <td align="left" colspan="4" style="color: red;font-size: 11px;">
            <div id="err11"></div>
        </td>
    </tr>
    <tr>
        <td colspan="4">
            <input type="submit" name="sub" />
        </td>
    </tr>
</table>

Это моя форма, когда пользователь нажимает на ARE YOU A QUESTION IE IE или NO. В НЕТ вся строка таблицы, которая имеет идентификатор cit, становится скрытой, но когда пользователь нажимает кнопку "Да", она снова отображает всю строку таблицы но моя проблема заключается в том, когда пользователь нажимает "НЕТ" и после этого нажимает "ДА", отображается строка таблицы, но она показывает мне меньше ширины

<script>
    function chk_register() {
        if (document.getElementById('rchk1').checked) {
            document.getElementById("cit").style.display = "block";

        }
        if (document.getElementById('rchk2').checked) {
            document.getElementById("cit").style.display = "none";
        }
    }
    function chk_register1() {
        if (document.getElementById('rchk3').checked) {
            document.getElementById("no").style.display = "block";
        }
        if (document.getElementById('rchk4').checked) {
            document.getElementById("no").style.display = "none";
        }
    }
</script>
  • 0
    Пожалуйста, переформатируйте
Теги:

1 ответ

0

Вы устанавливаете строку таблицы <tr> для отображения block для ее отображения. Вместо этого вы должны использовать table-row потому что это значение по умолчанию для <tr>:

демонстрация

function chk_register(){
    if (document.getElementById('rchk1').checked) {
       document.getElementById("cit").style.display = "table-row";

    }
    if (document.getElementById('rchk2').checked) {
       document.getElementById("cit").style.display = "none";
    }
}
 function chk_register1(){
    if (document.getElementById('rchk3').checked) {
       document.getElementById("no").style.display = "table-row";
    }
    if (document.getElementById('rchk4').checked) {
       document.getElementById("no").style.display = "none";
    }
}

Сторона примечания: вы должны использовать флажок onchange event not onclick.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню