"display : none"이있는 요소가 계속 표시됩니다.

Question

아래에서 설명하는 코드의 특정 부분을 표시하지 않도록 스타일을 설정했지만 페이지에 계속 표시됩니다. 코드의 일부를 별도의 테이블에 포함시켜야합니까? 문제가 무엇인지에 대해 의견을 제시하십시오.

<div id="submit"> 
<table 
    style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif" 
    ; border="0" cellpadding="5" cellspacing="0" align="center"> 

    <form id="frm" name="frm" action="http://app1/submitProxy.php" 
     method="POST" enctype="multipart/form-data"> 
     <tr> 
      <th colspan="2" bgcolor="#004276"><font color="white"> 
        Submit a File 
      </th> 
     </tr> 
     <tr> 
      <td>File:</td> 
      <td><input name="upfile" type="file" value=""> 
      </td> 
     </tr> 
     <input type="hidden" name="email" readonly="readonly" 
      value="<%=user.getUserName()%>" /> <input type="hidden" 
      name="reanalyze" value="true" /> 
     <tr> 
      <td>Case or Reference Number:</td> 
      <td><input type="text" name="caseno" value="${caseno}" /></td> 
     </tr> 
<%--   <tr> 
      <td>Date acquired:</td> 
      <td><input type="text" name="acq" id="acq" readonly="readonly" 
       value="${document.frm.acq}" /><strong><a href="#" 
        onclick="cal1.select(document.frm.acq,'anchor1','MM/dd/yyyy'); return false;" 
        title="cal1.select(document.frm.acq,'anchor1','MM/dd/yyyy'); return false;" 
        name="anchor1" id="anchor1"><font face="Helvetica,sans-serif"> 
          SELECT</font> </a> </strong></td> 
     </tr> 
     <tr> 
      <td>Type of system acquired from:</td> 
      <td><input type="text" name="systemAcquired" 
       value="${systemAcquired}" /></td> 
     </tr> --%> 
     <tr> 
      <td>Obtained via:</td> 
      <td></td> 
     </tr> 
     <tr> 
      <td><dd>Search Warrant:</dd></td> 
      <td><input type="checkbox" name="searchWarrant" 
       onclick="showhidefield()" value="Y"> 
      </td> 
     </tr> 
<div id='hideablearea' style='display: none;'> 
    <tr> 
      <td>Search Warrant Number:</td> 
      <td><input name="searchWarrantNumber" type="text" 
       value="${searchWarrantNumber}" /> <br /> 
      </td> 
     </tr> 
     <tr> 
      <td>Jurisdiction:</td> 
      <td><input name="jurisdiction" type="text" 
       value="${jurisdiction}" /> <br /> 
      </td> 
     </tr> 
     </div> 
    <tr> 
     <td><dd>Grand Jury:</dd></td> 
     <td><input type="checkbox" name="grandJury" value="Y" 
      onclick="checkGrandJury()"> 
     </td> 
    </tr> 
    <tr> 
     <td><dd>Found in the wild:</dd> 
     </td> 
     <td><input type="checkbox" name="foundInTheWild" value="Y" 
      onclick="checkFoundInTheWild()"> 
     </td> 
    </tr> 
    <tr> 
     <td><dd>Email:</dd></td> 
     <td><input type="checkbox" name="obtainedEmail" value="Y" 
      onclick="checkObtainedEmail()"> 
     </td> 
    </tr> 
    <tr> 
     <td><dd>Other:</dd></td> 
     <td><input type="checkbox" name="obtainedOther" value="Y" 
      onclick="checkObtainedOther()"> 
     </td> 
    </tr> 
    <tr> 
     <td>Environment:</td> 
     <td><select name="sandboxes[]" size="1"> 
       <option value="00-0C-29-CF-B8-A6">VMSB1 - Windows 7</option> 
       <option value="00-0C-29-0A-AB-9A">VMSB2 - Windows XP</option> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td>Comments:</td> 
     <td><textarea name="notes">Add comments here...</textarea><br> 

     </td> 
    </tr> 
    <td colspan="2"> 
     <center> 
      <input type="submit" name="button" value="Submit" 
       onclick="onSubmit()" /> 
     </center> 
    </td> 
    </form> 
</table> 
</div> 

Answer 1

도움 주셔서 감사합니다. 나는 어떤 이유로 든 당신의 아이디어를 사용할 수 없었습니다. 그러나 나는 그것에 대한 해결 방법을 발견했다. 나는 "via via"옵션을 선택하기 위해 드롭 다운 메뉴를 사용했다. 내가 원하는 이후이 수색 영장을 선택할 때 추가 필드 만, 나는 다음과 같은 한 : 드롭 다운 메뉴 선택에

<jsp:include page="template-header-menu.jsp" /> 



<script type="text/javascript"> 

function showFields(num){ 
    container = document.getElementById('field1GoHere'); 
    container.innerHTML = ''; 

    if(num == 1){ 
     container.innerHTML += '<td>Search Warrant Number:</td><td><input name="searchWarrantNumber" type="text" value="${searchWarrantNumber}" /></td>'; 
    } 
    container = document.getElementById('field2GoHere'); 
    container.innerHTML = ''; 

    if(num == 1){ 
     container.innerHTML += '<td>Jurisdiction:</td><td><input name="jurisdiction" type="text" value="${jurisdiction}" /></td>'; 
    } 

} 

. 
. 
. 
. 
. 

</script> 

<div id="submit"> 
<table 
    style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif" 
    ; border="0" cellpadding="5" cellspacing="0" align="center" width=450> 

    <form id="frm" name="frm" action="http://app1/submitProxy.php" 
     method="POST" enctype="multipart/form-data"> 
. 
. 
. 
. 
. 
. 
.   <tr> 
      <td width=450><font face="Helvetica,sans-serif">Obtained 
        via:* </font> 
      </td> 
      <td><select onchange="showFields(this.options[this.selectedIndex].value)"> 
       <option value="0">Choose:</option> 
       <option value="1">Search Warrant</option> 
       <option value="2">Grand Jury</option> 
       <option value="3">Found in the wild</option> 
       <option value="4">Email</option> 
       <option value="5">Other</option></select> 
      </td> 
     </tr> 
     <tr id="field1GoHere"></tr> 
     <tr id="field2GoHere"></tr> 

    <tr> 
    <td colspan="2"> 
     <center> 
      <input type="submit" name="button" value="Submit" 
       onclick="onSubmit()" /> 
     </center></td> 
    </form> 
</table> 
</div> 
<jsp:include page="template-bottom.jsp" /> 

따라서을의 옵션은 내가 표시 숨기고 싶어하고 나는하지 않았다 "display : none"을 사용하십시오.

Answer 2

TR 사이의 DIV는 잘못된 HTML입니다. TR 자체에 "display : none"을 입력하십시오.

 </tr> 
<div id='hideablearea' style='display: none;'> <----- invalid 
    <tr> 

Answer 3

div 안에 테이블 행을 넣을 수 없습니다. 코드를 두 개의 테이블로 분리하고 두 번째 테이블을 숨기는 것이 좋습니다.

<div id="submit"> 
<form id="frm" name="frm" action="http://app1/submitProxy.php" 
     method="POST" enctype="multipart/form-data"> 
<table 
    style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif" 
    ; border="0" cellpadding="5" cellspacing="0" align="center"> 


     <tr> 
      <th colspan="2" bgcolor="#004276"><font color="white"> 
        Submit a File 
      </th> 
     </tr> 
     <tr> 
      <td>File:</td> 
      <td><input name="upfile" type="file" value=""> 
      </td> 
     </tr> 
     <input type="hidden" name="email" readonly="readonly" 
      value="<%=user.getUserName()%>" /> <input type="hidden" 
      name="reanalyze" value="true" /> 
     <tr> 
      <td>Case or Reference Number:</td> 
      <td><input type="text" name="caseno" value="${caseno}" /></td> 
     </tr> 
<%--   <tr> 
      <td>Date acquired:</td> 
      <td><input type="text" name="acq" id="acq" readonly="readonly" 
       value="${document.frm.acq}" /><strong><a href="#" 
        onclick="cal1.select(document.frm.acq,'anchor1','MM/dd/yyyy'); return false;" 
        title="cal1.select(document.frm.acq,'anchor1','MM/dd/yyyy'); return false;" 
        name="anchor1" id="anchor1"><font face="Helvetica,sans-serif"> 
          SELECT</font> </a> </strong></td> 
     </tr> 
     <tr> 
      <td>Type of system acquired from:</td> 
      <td><input type="text" name="systemAcquired" 
       value="${systemAcquired}" /></td> 
     </tr> --%> 
     <tr> 
      <td>Obtained via:</td> 
      <td></td> 
     </tr> 
     <tr> 
      <td><dd>Search Warrant:</dd></td> 
      <td><input type="checkbox" name="searchWarrant" 
       onclick="showhidefield()" value="Y"> 
      </td> 
     </tr> 
     </table> 
     <table id='hideablearea' style="display: none; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif" 
    ; border="0" cellpadding="5" cellspacing="0" align="center"> 
    <tr> 
      <td>Search Warrant Number:</td> 
      <td><input name="searchWarrantNumber" type="text" 
       value="${searchWarrantNumber}" /> <br /> 
      </td> 
     </tr> 
     <tr> 
      <td>Jurisdiction:</td> 
      <td><input name="jurisdiction" type="text" 
       value="${jurisdiction}" /> <br /> 
      </td> 
     </tr> 
     </div> 
    <tr> 
     <td><dd>Grand Jury:</dd></td> 
     <td><input type="checkbox" name="grandJury" value="Y" 
      onclick="checkGrandJury()"> 
     </td> 
    </tr> 
    <tr> 
     <td><dd>Found in the wild:</dd> 
     </td> 
     <td><input type="checkbox" name="foundInTheWild" value="Y" 
      onclick="checkFoundInTheWild()"> 
     </td> 
    </tr> 
    <tr> 
     <td><dd>Email:</dd></td> 
     <td><input type="checkbox" name="obtainedEmail" value="Y" 
      onclick="checkObtainedEmail()"> 
     </td> 
    </tr> 
    <tr> 
     <td><dd>Other:</dd></td> 
     <td><input type="checkbox" name="obtainedOther" value="Y" 
      onclick="checkObtainedOther()"> 
     </td> 
    </tr> 
    <tr> 
     <td>Environment:</td> 
     <td><select name="sandboxes[]" size="1"> 
       <option value="00-0C-29-CF-B8-A6">VMSB1 - Windows 7</option> 
       <option value="00-0C-29-0A-AB-9A">VMSB2 - Windows XP</option> 
     </select> 
     </td> 
    </tr> 
    <tr> 
     <td>Comments:</td> 
     <td><textarea name="notes">Add comments here...</textarea><br> 

     </td> 
    </tr> 
    <td colspan="2"> 
     <center> 
      <input type="submit" name="button" value="Submit" 
       onclick="onSubmit()" /> 
     </center> 
    </td> 

</table> 
</form> 

Answer 4

아, 테이블을 부러 뜨 렸습니다. 올바른 표식이 아닌 두 테이블 tr에 'div'태그를 삽입했습니다.

두 개의 별도 테이블을 만들고 두 번째 테이블을 숨길 것을 권장합니다. 그것들이 같은지 확인하려면 테이블과 td 태그에 "width ="속성을 사용하십시오.

또는 다른 방법으로, "스타일 = '표시 : 없음;'"를 사용 숨기려는 각 태그를,이 같은 클래스 식별, 예를 들면별로 전환 다음으로

<tr class="firstHidden" style="display:none;"> .....</tr> 

한 번에 모든 그들을 전환 바로 JS 라이브러리 (예 : jQuery를)은 매우 간단하다 :

$('.firstHidden').show(); 

Answer 5

당신이 할 일은 넣어 당신의 id='hideablearea' style='display: none;' 숨길하려는 행 (들) - 오 제거 divs