单击单选按钮后,表行未删除

时间:2014-04-15 09:57:33

标签: javascript jquery

<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>

这是我的表格,当用户点击你是会员问题IE是或否 在NO中,具有id cit的整个表行正在隐藏但是当用户单击是时它将再次显示整个表行但我的问题是当用户单击NO并且之后它将点击YES,表行显示但它显示我的宽度

<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>

1 个答案:

答案 0 :(得分:0)

您正在设置表格行<tr>以显示block以显示它。相反,您应该使用table-row,因为这是<tr>的默认值:

<强> Demo

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事件而不是onclick