javascript - 尝试在javascript中使用innerHTML插入整个表格

Question

我有希望人们填写的表格，但如果他们已经是会员，我希望他们选中一个复选框和表格中的表格，以切换到表格中的登录表格。有没有办法解决这个问题？

这是一些代码：

function CheckMember() {
// Function to Check if Check box is Checked
    var ismember = document.getElementById('checkbox').value;

    // Check if ismember = 0
    if (ismember == '1') {
        document.getElementById("forms").innerHTML = "<table width='25%' border='0' cellpadding='5' cellspacing='5' bgcolor='#<?php echo $tablebg; ?>'>
            <tr><td align='center' colspan='3'>
                <span class='style1'>Already a Member?</span>
                <input id='checkbox' type='checkbox' value='1' name='ismemeber' class='style2' onclick='CheckMember()' /></td></tr>
            <tr><td nowrap='nowrap'><div align='center'><span class='style1'><h3>Please enter username and password</h3></span></div></td></tr>
            <tr><td align='center'><span class='style1'>Login:</span><br /><input type='input' name='access_login' class='style2' /><br /><span class='style1'>Password:</span><br /><input type='password' name='access_password' class='style2' /><p></p><input type='submit' name='Submit' value='Submit' class='style2' /></td></tr>
            </td></tr></table>";

    // If ismember is anything else
    else

        document.getElementById("forms").innerHTML = "<table width='25%' border='0' cellpadding='5' cellspacing='5' bgcolor='#<?php echo $tablebg; ?>'>
            <tr><td align='center'>Already a Member? <input id='checkbox' type='checkbox' name='ismemeber' onclick='CheckMember()' /></td></tr>
            <tr><td nowrap='nowrap'><div align='left'><span class='style1'>First Name</span></div></td><td><span class='style1'>:</span></td>
            <td><div align='left'><input type='text' name='ffname' class='style2' maxlength='25' /></div></td></tr>
            <tr><td nowrap='nowrap'><div align='left'><span class='style1'>Middle Initial</span></div></td><td><span class='style1'>:</span></td>
            <td><div align='left'><input name='fmname' type='text' class='style2' size='3' maxlength='1' /></div></td></tr>
            <tr><td nowrap='nowrap'><div align='left'><span class='style1'>Last Name</span></div></td><td><span class='style1'>:</span></td>
            <td><div align='left'><input type='text' name='flname' class='style2' maxlength='25'/></div></td></tr>
            <tr><td colspan='3'><input type='hidden' name='submitted' value='1' /><span class='style1'>Yes&nbsp;&nbsp;&nbsp;&nbsp;No</span></center></td></tr>
            <tr><td colspan='3'><center><input type='submit' value='Submit' />&nbsp;&nbsp;&nbsp;&nbsp;<input type='reset' value='Reset' /></center></td></tr>
            <tr><td colspan='3' nowrap='nowrap'><center><span class='style5'>All Fields are Required</span></center></td></tr></table>";

};

</script>

HTML部分：

<div id="forms">CHANCE THIS</div>

Answer 1

像用户 user1370958 所说的那样做，或者你可以把它放在一条线上，我会为生产做

在每个复选框中onclick添加

`onclick`='return CheckMember(0)' 
 onclick='return CheckMember(1)'

对于 CheckMember 函数，请尝试

function CheckMember(isMember) { 

/*
if(document.getElementById('checkbox')){
var ismember = document.getElementById('checkbox').value;
}*/



// Check if ismember = 0
if (isMember == '1') {
    document.getElementById("forms").innerHTML = "<table width='25%' border='0' cellpadding='5' cellspacing='5' bgcolor='#<?php echo $tablebg; ?>'><tr><td align='center' colspan='3'><span class='style1'>Already a Member?</span><input id='checkbox' type='checkbox' value='1' name='ismemeber' class='style2' onclick='return CheckMember(0)'  checked /></td></tr><tr><td nowrap='nowrap'><div align='center'><span class='style1'><h3>Please enter username and password</h3></span></div></td></tr><tr><td align='center'><span class='style1'>Login:</span><br /><input type='input' name='access_login' class='style2' /><br /><span class='style1'>Password:</span><br /><input type='password' name='access_password' class='style2' /><p></p><input type='submit' name='Submit' value='Submit' class='style2' /></td></tr></td></tr></table>";


// If ismember is anything else
}    else {

    document.getElementById("forms").innerHTML = "<table width='25%' border='0' cellpadding='5' cellspacing='5' bgcolor='#<?php echo $tablebg; ?>'><tr><td align='center'>Already a Member? <input id='checkbox' type='checkbox' name='ismemeber' onclick='return CheckMember(1)' /></td></tr><tr><td nowrap='nowrap'><div align='left'><span class='style1'>First Name</span></div></td><td><span class='style1'>:</span></td><td><div align='left'><input type='text' name='ffname' class='style2' maxlength='25' /></div></td></tr><tr><td nowrap='nowrap'><div align='left'><span class='style1'>Middle Initial</span></div></td><td><span class='style1'>:</span></td><td><div align='left'><input name='fmname' type='text' class='style2' size='3' maxlength='1' /></div></td></tr><tr><td nowrap='nowrap'><div align='left'><span class='style1'>Last Name</span></div></td><td><span class='style1'>:</span></td><td><div align='left'><input type='text' name='flname' class='style2' maxlength='25'/></div></td></tr><tr><td colspan='3'><input type='hidden' name='submitted' value='1' /><span class='style1'>Yes&nbsp;&nbsp;&nbsp;&nbsp;No</span></center></td></tr><tr><td colspan='3'><center><input type='submit' value='Submit' />&nbsp;&nbsp;&nbsp;&nbsp;<input type='reset' value='Reset' /></center></td></tr><tr><td colspan='3' nowrap='nowrap'><center><span class='style5'>All Fields are Required</span></center></td></tr></table>";
}
};

.

<div id="forms"><script>CheckMember()</script></div>

您需要调整复选框以保留选中的值，看看是否有帮助