[英]elements with “display: none” remain visible
As I mentioned in the topic, even-though I have set the style to not display a particular part of the code given below, it still appears on the page. 正如我在主题中提到的那样,尽管我将样式设置为不显示下面给出的代码的特定部分,但它仍显示在页面上。 Should I be including the part of the code in a separate table?
我应该将代码的一部分包含在单独的表中吗? Please give your suggestions on what the problem could be.
请提供有关可能出现的问题的建议。
<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>
A DIV between TRs is invalid HTML. TR之间的DIV是无效的HTML。 Put the "display:none" on the TR itself.
在TR本身上放置“ display:none”。
</tr>
<div id='hideablearea' style='display: none;'> <----- invalid
<tr>
Arrgh, you broke the table: You inserted a 'div' tag within two table tr's, which is not valid html. 糟糕,您打破了表格:您在两个表格tr的中间插入了一个'div'标记,这是无效的html。
I suggest creating two separate tables, and hide the 2nd one. 我建议创建两个单独的表,并隐藏第二个表。 To make sure they have the same with, use the "width=" attribute on the table and td tags.
要确保它们具有相同的属性,请在表和td标签上使用“ width =“属性。
Or, as another approach, use "style='display:none;'" tag on each you want to hide, and toggle them by a class identification, eg like this: 或者,作为另一种方法,在要隐藏的每个标签上使用“ style ='display:none;'”标签,然后通过类标识对其进行切换,例如:
<tr class="firstHidden" style="display:none;"> .....</tr>
With the right JS library (eg jQuery), toggling them on all at once is very simple: 使用正确的JS库(例如jQuery),一次切换它们非常简单:
$('.firstHidden').show();
you can't put table rows inside a div like that. 您不能像这样将表格行放入div中。 It would be better to split your code into two tables, and hide the second.
最好将代码分成两个表,然后隐藏第二个表。
<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>
All you have to do is put your id='hideablearea' style='display: none;'
您要做的就是将
id='hideablearea' style='display: none;'
in the row(s) you're trying to hide - oh and remove the divs 在您要隐藏的行中-哦,删除div
Thank you for you help. 谢谢你的帮助。 I was for some reason not able to use any of your ideas.
由于某种原因,我无法使用您的任何想法。 But, I found a work-around to it.
但是,我找到了解决方法。 I used a drop down menu for selecting the "obtained via" option.
我使用了一个下拉菜单来选择“通过”来获取。 And since I wanted extra fields only when I select search warrant, I did something like the following:
而且由于仅在选择搜索凭单时才需要额外的字段,因此我做了如下操作:
<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" />
Thus on selecting the drop down menu, the the options I wanted to hide appear and I didn't have to use the "display:none" at all. 因此,在选择下拉菜单时,将出现我要隐藏的选项,而我根本不需要使用“ display:none”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.