éléments avec "display: none" restent visibles

Question

Comme je l'ai mentionné dans le sujet, même si j'ai défini le style pour ne pas afficher une partie particulière du code donné ci-dessous, il apparaît toujours sur la page. Dois-je inclure la partie du code dans un tableau distinct? S'il vous plaît donner vos suggestions sur ce que le problème pourrait être.

<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

Merci pour votre aide. J'étais pour une raison quelconque incapable d'utiliser vos idées. Mais, j'ai trouvé un moyen de contourner cela. J'ai utilisé un menu déroulant pour sélectionner l'option "obtenu via". Et comme je voulais des champs supplémentaires que lorsque je sélectionne un mandat de perquisition, je l'ai fait quelque chose comme ce qui suit:

<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" /> 

Ainsi sur la sélection du menu déroulant, les options que je voulais cacher apparaître et je ne pas avoir à utilisez le "display: none" du tout.

Answer 2

Un DIV entre TRs est un code HTML non valide. Mettez le "display: none" sur le TR lui-même.

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

Answer 3

vous ne pouvez pas mettre des lignes de table dans un div comme ça. Il vaudrait mieux diviser votre code en deux tables, et cacher la seconde.

<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

Arrgh, vous avez cassé la table: Vous avez inséré une balise 'div' dans les deux de la table de tr, ce qui est pas valide html.

Je suggère de créer deux tables séparées et de masquer la deuxième. Pour s'assurer qu'ils ont la même chose, utilisez l'attribut "width =" sur la table et les tags td.

Ou, comme une autre approche, utiliser « style = « display: none; » » étiquette sur chaque vous voulez cacher, et les passer par une identification de classe, par exemple comme ceci:

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

Avec la bibliothèque JS droite (par exemple jQuery), sur les tout basculer à la fois est très simple:

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

Answer 5

tout ce que vous devez faire est de mettre votre id='hideablearea' style='display: none;' dans la ligne (s) que vous essayez de cacher - oh et enlever les divs