在單擊/提交按鈕時顯示整個表格

Question

我已經創建了一個表格。 在提交表單時，我想顯示整個表單，但目前不這樣做。 這是我的代碼：

 function Openform() { document.getElementById('form1').style.display = ''; } 

 <div id = "form1" style = "display:none"> <form id="formirri" method="post" action="" target="_parent"> <br/><br/> <div id="demo"> <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"><tr><td colspan=1></td></tr> <tr> <td><a href="#" class="close-classic"></a></td> </tr> </table> </div> <input id="dynamic" name="Irrigation Form" type="button" value="Calulation Form" ; onclick = "Openform();" style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; "> 

Answer 1

您在樣式上犯了一個錯誤。更改如下：

function Openform()
{
document.getElementById('form1').style.display = '';
}

<div style = "display:none">

顯示和可見性都不同。

display ：none在頁面中將不可用，也不占用任何空間。

能見度 ：hidden隱藏元素，但是它仍然會像以前一樣占用相同的空間。

HTML：

<div id = "form1" style = "display:none">
<form  id="formirri" method="post" action="" target="_parent">
       <br/><br/>
    <div id="demo">
    <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"><tr><td colspan=1></td></tr>
<tr>
    <td><a href="#" class="close-classic"></a></td>
</tr>
</table>

</div>
</form>
</div>

Answer 2

您在這里犯的一個錯誤是您忘記關閉<form>標記，首先在form標記中使用display:none ，然后使用onclick()將其樣式更改為display:block 。

嘗試這個

 function Openform(){ document.getElementById('form1').style.display = 'block'; } 

  <div style = "Visibility = hidden"> <form id="form1" method="post" action="" target = "_parent" style="display: none" ><br><br> <div id="demo"> <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"> <tr> <td colspan=1>1</td> </tr> <tr> <td><a href="#" class="close-classic">2</a></td> </tr> </table> </div> </form> <input id="dynamic" name="Irrigation Form" type="button" value="Calulation Form" ; onclick = "Openform();" style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; "> 

Answer 3

這應該工作：

function Openform()
{
document.getElementById("form1").style.visibility = "visible";
}

HTML：

<div id = "form1" style = "visibility:hidden">
<form  id="formirri" method="post" action="" target="_parent">
   <br/><br/>
<div id="demo">
<table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"><tr><td colspan=1></td></tr>
<tr>
   <td><a href="#" class="close-classic"></a></td>
</tr>
</table>

Answer 4

嘗試這個

 function Openform() { document.getElementById('form1').style.display = 'block'; } 

 <form id="form1" method="post" action="" target="_parent" style="display:none;"> <br><br> <div id="demo"> <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"> <tr> <td colspan=1></td> </tr> <tr> <td> <a href="#" class="close-classic"></a> </td> </tr> </table> </div> </form> <input id="dynamic" name="Irrigation Form" type="button" value="Calulation Form" ; onclick="Openform();" style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; "> 

Answer 5

似乎您的所有代碼都是正確的，除了很少的關閉HTML標記。

 function Openform() { alert("Openform clicked!"); document.getElementById('form1').style.display = ''; } 

 <div id = "form1" style = "display:none"> <form id="formirri" method="post" action="" target="_parent"> <br/><br/> <div id="demo"> <table width="230px" align="center" style="box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 100);"> <tr><td colspan=1> Welcome User</td></tr> <tr> <td><a href="#" class="close-classic">I am the second line</a></td> </tr> </table> </div> </form> </div> <input id="dynamic" name="Irrigation Form" type="button" value="Calulation Form" ; onclick = "Openform();" style="overflow:hidden;padding: 5px 5px; border-radius: 3px;font-size: 8.5pt; width:200px ; background-color: #E7FCCA; font-weight: bold; "> 

快樂的編碼:)

Answer 6

您可以像這樣在函數中使用：

var elem = document.getElementById('id');
 elem.style.display = 'none'; // hide
 elem.style.display = 'block'; // show - use this for block elements (div, p)
 elem.style.display = 'inline'; // show - use this for inline elements (span, a)

或style.visibility實際上會使div仍然存在，但為“全空”或“全白”

 elem.style.visibility = 'hidden'; // hide, but lets the element keep its size
 elem.style.visibility = 'visible';

如果您使用的是jQuery，則只要設置display屬性，您就可以更加輕松地完成此操作：

$(elem).hide();
$(elem).show();