怎么样通过点击一个按钮，使原来没有显示出来的表单显示出来？

<body><form name=meizz style="display: none">
<input><input> 表单
</form><input type=button value=show onclick="meizz.style.display=''">

解决方案 »

  1.   

    参看下面的代码
    <html>
    <head>
    <title></title>
    <style type="text/css"><!--
    #msxy { position:absolute; }
    --></style>
    <script language="JavaScript"><!--
    function setDisp(objname1,objname2){ 

    if(window[objname1].style.display=='none'){
    document.all["text1_1"].innerText = document.all["cell1_1"].value;
    document.all["text1_2"].innerText = document.all["cell1_2"].value;
    document.all["text2_1"].innerText = document.all["cell2_1"].value;
    document.all["text2_2"].innerText = document.all["cell2_2"].value;

    window['table1_1'].style.display='none';
    window['table1_2'].style.display='none';
    window['table2_1'].style.display='none';
    window['table2_2'].style.display='none';
    window['hidTable1_1'].style.display='block';
    window['hidTable1_2'].style.display='block';
    window['hidTable2_1'].style.display='block';
    window['hidTable2_2'].style.display='block'; window[objname1].style.display='block';
    window[objname2].style.display='none';
    }
    }
    function showTitle(cont){ 
    document.all["msxy"].innerText = cont;
    }
    function hidTitle(){ 
    document.all["msxy"].innerText = "";
    }function setMouseXY()
    {
    X = event.x;
    Y = event.y;
    document.all["msxy"].style.left= X + 8;
    document.all["msxy"].style.top = Y + 16;
    }document.onmousemove = setMouseXY;
    // --></script>
    </head>
    <body>
    <form>
    <div id="msxy"></div>
    <table width="600" cellspacing="1" cellpadding="1" border="1">
    <tr height="40">
    <td width="50%" onClick="javascript:setDisp('table1_1','hidTable1_1')" onMouseOver="javascript:showTitle('cell1_1')" onMouseOut="javascript:hidTitle();">
    <table  border="0" id="table1_1" bgcolor="#ffffff" style="display:none">
    <tr><td><input type="text"  name ="cell1_1" ></td></tr>
    </table>
    <table  border="0" id="hidTable1_1" bgcolor="#ffffff" style="display:block">
    <tr><td><div id="text1_1"></div></td></tr>
    </table>
    </td>
    <td width="50%" onClick="javascript:setDisp('table1_2','hidTable1_2')" onMouseOver="javascript:showTitle('cell1_2')" onMouseOut="javascript:hidTitle();">
    <table  border="0" id="table1_2" bgcolor="#ffffff" style="display:none">
    <tr><td><input type="text"  name ="cell1_2" ></td></tr>
    </table>
    <table  border="0" id="hidTable1_2" bgcolor="#ffffff" style="display:block">
    <tr><td><div id="text1_2"></div></td></tr>
    </table>
    </td>
    </tr>
    <tr height="40">
    <td width="50%" onClick="javascript:setDisp('table2_1','hidTable2_1')" onMouseOver="javascript:showTitle('cell2_1')" onMouseOut="javascript:hidTitle();">
    <table  border="0" id="table2_1" bgcolor="#ffffff" style="display:none">
    <tr><td><input type="text"  name ="cell2_1" ></td></tr>
    </table>
    <table  border="0" id="hidTable2_1" bgcolor="#ffffff" style="display:block">
    <tr><td><div id="text2_1"></div></td></tr>
    </table>
    </td>
    <td width="50%" onClick="javascript:setDisp('table2_2','hidTable2_2')" onMouseOver="javascript:showTitle('cell2_2')" onMouseOut="javascript:hidTitle();">
    <table  border="0" id="table2_2" bgcolor="#ffffff" style="display:none">
    <tr><td><input type="text"  name ="cell2_2" ></td></tr>
    </table>
    <table  border="0" id="hidTable2_2" bgcolor="#ffffff" style="display:block">
    <tr><td><div id="text2_2"></div></td></tr>
    </table>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html>