設置窗體部件不可見

我有一個帶有輸入欄的窗體。在第一部分有2個按鈕（外部，內部）後，外部重定向到其他位置，內部按鈕應顯示（設置可見）更多輸入字段。設置窗體部件不可見

像

<form action="servlet_link" method="post"> 
<table class="ui-widget"> 
    <colgroup width="350" span="2"></colgroup> 
    <tbody> 
     <tr> 
      <td> 
      <p class="form"> 
       Familyname 
      </p><td> 
      <input class="ui-widget-content ui-state-default ui-corner-all" name="familyname" type="text""> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <p class="form"> 
       Givenname 
      </p></td> 
      <td> 
      <input class="ui-widget-content ui-state-default ui-corner-all" name="ustid" type="text"> 
      </td> 
     </tr> 
    </tbody> 
</table> 
    <div class="center"> 
    <!-- Buttons --> 
    <table align="center"> 
     <tr> 
      <td> 
       <!-- sends data post and redirects u --> 
       <a href="javascript:document.forms[0].submit()" class="btn" name="extern">External</a>         
      </td> 
      <td> 
       <!-- shows more input fields and sets both buttons invisible --> 
       <a href="???" class="btn" name="intern" >Internal</a> 
      </td> 
     </tr> 
    </table> 
    </div> 

    <!-- part 2 should be shown --> 

    <table class="ui-widget"> 
    <colgroup width="350" span="2"></colgroup> 
    <tbody> 
     <tr> 
      <td> 
      <p class="form"> 
       Companyname 
      </p><td> 
      <input class="ui-widget-content ui-state-default ui-corner-all" name="companyname" type="text""> 
      </td> 
     </tr> 
     <tr> 
      <td> 
      <p class="form"> 
       address 
      </p></td> 
      <td> 
      <input class="ui-widget-content ui-state-default ui-corner-all" name="address" type="text"> 
      </td> 
     </tr> 
    </tbody> 
</table> 
    <div class="center"> 
    <!-- Buttons --> 
    <table align="center"> 
     <tr> 
      <td> 
       <!-- sends data post and redirects u --> 
       <a href="javascript:document.forms[0].submit()" class="btn" name="extern">External</a>         
      </td> 
     </tr> 
    </table> 
    </div> 
</form>

我一定給所有元素ID標籤，並將其設置隱形通過：

JS：

function invisbleForm() { 

      document.getElementById("companynameText").style.display ="block"; 

    }

有沒有更好的解決辦法做到這一點？ THX對於任何幫助:)

更新1

確定設置其有形和無形的是沒有把我有我的網頁上一個大的白色塊如何動態調整它的問題呢？

來源

2013-08-29 vicR

你需要熟悉CSS「類」的概念。具有相同行爲的元素可以通過一組通用的CSS規則進行控制。 – fred02138

你可以去jquery.org –

那麼你可以這樣做：

Assing一個id到窗體，然後添加一個類「myFields」你希望顯示輸入字段。那就試試這個：

var myForm = document.getElementById('FormId'); 
var ipnutFieldsToShow = myForm.getElementsByClassName('myFields'); 
for(var i = 0; i < inputFieldsToShow.length; i++) { 
    inputFieldsToShow[i].style.display ="block"; 
}

來源

2013-08-29 13:33:49 Syd

謝謝用'display：none;'和'display：block;'完美地完美地處理'' – vicR

沒有問題，小心:) – Syd