“显示：无”的元素仍然可见

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

谢谢你的帮助。我出于某种原因无法使用您的任何想法。但是，我找到了解决办法。我使用下拉菜单选择“获取通过”选项。而且因为我想额外的字段，只有当我选择的搜查令，我不喜欢的东西如下：

<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'标记，这是无效html。

我建议创建两个单独的表，并隐藏第二个。为了确保它们具有相同的值，请使用表和td标签上的“width =”属性。

或者，作为另一种方法，用“风格=‘显示：无;’”每个要隐藏的标签，并用类标识，例如像这样切换他们：

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

随着正确的JS库（如jQuery的），上一次全部切换起来非常简单：

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

Answer 5

所有你需要做的就是把你的id='hideablearea' style='display: none;'你想隐藏的行（收费） - 噢，并删除divs