大家帮我看看我这个页面的div里面的display:none无效

xiaoyuer8217 2006-10-30 02:30:28
如题：其中div层里面的那段代码在这个页面里display:none无效.
但是在别的页面里面就好用，大家可以把下面代码复制下来，
在本地看看效果就明白我的意思了，不需要服务端代码的，
用editplus打开然后control+b就能看见效果了，
前天一位仁兄说把div改成span，我当时里面多了一个table确实好用,但是页面格式就乱套了。
现在要求是div里面没有table的，改成span也不能用。
大家看看高人帮帮忙，谢谢了
<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.util.*,otherbean.MountGuardBean;"%>
<html>
<head>
<title>查询结果</title>
<link href="js/style_IE.css" rel="stylesheet" type="text/css">


</head>
<%

Iterator it = (Iterator) request.getAttribute("myit");

%>

<body onload="">
<SCRIPT language=JavaScript src="js/head.js"
type=text/JavaScript></SCRIPT>
<script language="javascript">
function exportExcel(){

}
</script>
<script>
function showMenu(){
document.getElementById("menu1").style.display="";
document.getElementById("menu1").focus();
}
function hideMenu(){
document.getElementById("menu1").style.display="none";
}
</script>

<table align="center" class="maintable" width="800">
<form name="myform">
<tr>
<td align="center">查询结果</td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td>                              <a href="mountguardqry.jsp">再查询</a>     



</td>
</tr>
<tr>
<td>
<table align="center" width="800" border="0">
<tbody>

<tr bgColor="#C0C0C0">
<td>ID</td>
<td>工号</td>
<td>姓名</td>
<td>入职时间</td>
<td>录入时间</td>
<td>修改</td>
</tr>
<%
while(it.hasNext()){

MountGuardBean bean = (MountGuardBean) it.next();

%>

<tr>
<td><%=bean.getInfoid()%></td>
<td><%=bean.getUserid()%></td>
<td><%=bean.getUsername()%></td>
<td><%=bean.getMountdate()%></td>
<td><%=bean.getInputdate()%></td>
<td><a href="javascript: showMenu();void(0);">修改</a></td>

</tr>

<div onblur="hideMenu();" style="border:#555 2px outset;padding:10px;display:none;" id="menu1" tabIndex=0>
<tr>
<input type="hidden" name="infoid" value='<%=bean.getInfoid()%>'/>
<td style="width:10%" class="m1" align="right">工号</td>
<td><input type="text" name="recordid" value='<%=bean.getUserid()%>' readonly/></td>
<td style="width:15%" class="m1" align="right">姓名</td>
<td><input type="text" name="recordid" value='<%=bean.getUsername()%>' readonly/></td>
</tr><tr>
<td style="width:20%" class="m1" align="right">入职时间</td>
<td><input type="text" name="recordid" value='<%=bean.getMountdate()%>' readonly/></td>
<td><input type="submit" value="保存" /></td>
<td><input type="button" value="删除" onclick="mountGuardDel('<%=bean.getInfoid()%>')"/></td>
</tr>

</div>

<%}%>



</tbody>

</table>
</td>
</tr>
</form>
</table>
<SCRIPT language=JavaScript src="js/bottom.js"
type=text/JavaScript></SCRIPT>
</body>
</html>
...全文
778 11 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
PaulLeder 2006-10-30
  • 打赏
  • 举报
 回复
<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.util.*,otherbean.MountGuardBean;"%>
<html>
<head>
<title>查询结果</title>
<link href="js/style_IE.css" rel="stylesheet" type="text/css">


</head>
<%

Iterator it = (Iterator) request.getAttribute("myit");

%>

<body onload="">
<SCRIPT language=JavaScript src="js/head.js"
type=text/JavaScript></SCRIPT>
<script language="javascript">
function exportExcel(){

}
</script>
<script>
function showMenu(){
document.getElementById("menu1").style.display="";
document.getElementById("menu1").focus();
}
function hideMenu(){
document.getElementById("menu1").style.display="none";
}
</script>

<table align="center" class="maintable" width="800">
<form name="myform">
<tr>
<td align="center">查询结果</td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td>                              <a href="mountguardqry.jsp">再查询</a>     



</td>
</tr>
<tr>
<td>
<table align="center" width="800" border="0">
<tbody>

<tr bgColor="#C0C0C0">
<td>ID</td>
<td>工号</td>
<td>姓名</td>
<td>入职时间</td>
<td>录入时间</td>
<td>修改</td>
</tr>
<%
while(it.hasNext()){

MountGuardBean bean = (MountGuardBean) it.next();

%>

<tr>
<td><%=bean.getInfoid()%></td>
<td><%=bean.getUserid()%></td>
<td><%=bean.getUsername()%></td>
<td><%=bean.getMountdate()%></td>
<td><%=bean.getInputdate()%></td>
<td><a href="javascript: showMenu();void(0);">修改</a></td>

</tr>

<span onblur="hideMenu();" style="border:#555 2px outset;padding:10px;display:none;" id="menu1" tabIndex=0><table>
<tr>
<input type="hidden" name="infoid" value='<%=bean.getInfoid()%>'/>
<td style="width:10%" class="m1" align="right">工号</td>
<td><input type="text" name="recordid" value='<%=bean.getUserid()%>' readonly/></td>
<td style="width:15%" class="m1" align="right">姓名</td>
<td><input type="text" name="recordid" value='<%=bean.getUsername()%>' readonly/></td>
</tr><tr>
<td style="width:20%" class="m1" align="right">入职时间</td>
<td><input type="text" name="recordid" value='<%=bean.getMountdate()%>' readonly/></td>
<td><input type="submit" value="保存" /></td>
<td><input type="button" value="删除" onclick="mountGuardDel('<%=bean.getInfoid()%>')"/></td>
</tr>
</table>
</span>

<%}%>



</tbody>

</table>
</td>
</tr>
</form>
</table>
<SCRIPT language=JavaScript src="js/bottom.js"
type=text/JavaScript></SCRIPT>
</body>
</html>

这个是方法一（就事论事）。
方法二是动态加入HTML。
梅雪香 2006-10-30
  • 打赏
  • 举报
 回复
有办法,你可以把你的div放到点击行的下一行<tr>里(而不是直接写一个div),但隐藏它(行),点击显示,再点击隐藏
xiaoyuer8217 2006-10-30
  • 打赏
  • 举报
 回复
CutBug，就像他们说的那样格式会出问题的。
我在问一下大家，难道就没有解决办法了么？
我就是想查询出所有记录以后，单击一条记录，该记录下面就出现该条的明细，仅此而已。
希望高人指教
CutBug 2006-10-30
  • 打赏
  • 举报
 回复
<table>
<tr>
<td>
<!--div放在这里也就是TD里，是应该可以控制的-->
<div>
...
</div>
</td>
</table>
梅雪香 2006-10-30
  • 打赏
  • 举报
 回复
html中的标签并不是可以随意嵌套的,比如,你就不能在select标签里写一个textarea出来
<select><textarea></textarea></select> select只希望有option子项,也只能解释option子项
表格也一样,你可以用tbody,tr,td,th,thead,tfoot等(当然也要有一定的层次关系).但是放个div进去(td里除外)是没法处理的,表格不支持这样的写法
CutBug 2006-10-30
  • 打赏
  • 举报
 回复
楼上能不能说清楚点，为什么不能这样？
xxuu503 2006-10-30
  • 打赏
  • 举报
 回复
不能这么做

alert(document.body.innerHTML)
alert(document.getElementById("menu1").outerHTML)

看看就知道了
CutBug 2006-10-30
  • 打赏
  • 举报
 回复
看看是不是你要的效果
CutBug 2006-10-30
  • 打赏
  • 举报
 回复
<%@ page contentType="text/html;charset=gb2312"%>
<%@ page import="java.util.*,otherbean.MountGuardBean;"%>
<html>
<head>
<title>查询结果</title>
<link href="js/style_IE.css" rel="stylesheet" type="text/css">


</head>
<%

Iterator it = (Iterator) request.getAttribute("myit");

%>

<body onload="">
<SCRIPT language=JavaScript src="js/head.js"
type=text/JavaScript></SCRIPT>
<script language="javascript">
function exportExcel(){

}
</script>
<script>
function showMenu(){
document.getElementById("menu1").style.display="";
document.getElementById("menu1").focus();
}
function hideMenu(){
document.getElementById("menu1").style.display="none";
}
</script>

<table align="center" class="maintable" width="800" ID="Table1">
<form name="myform" ID="Form1">
<tr>
<td align="center">查询结果</td>
</tr>
<tr>
<td><hr></td>
</tr>
<tr>
<td>                              <a href="mountguardqry.jsp">再查询</a>     



</td>
</tr>
<tr>
<td>
<table align="center" width="800" border="0" ID="Table2">

<tr bgColor="#C0C0C0">
<td>ID</td>
<td>工号</td>
<td>姓名</td>
<td>入职时间</td>
<td>录入时间</td>
<td>修改</td>
</tr>
<%
while(it.hasNext()){

MountGuardBean bean = (MountGuardBean) it.next();

%>

<tr>
<td><%=bean.getInfoid()%></td>
<td><%=bean.getUserid()%></td>
<td><%=bean.getUsername()%></td>
<td><%=bean.getMountdate()%></td>
<td><%=bean.getInputdate()%></td>
<td><a href="javascript: showMenu();void(0);">修改</a></td>

</tr>
</table>
<div onblur="hideMenu();" style="border:#555 2px outset;padding:10px;display:none;" id="menu1" tabIndex=0>
<table>
<tr>
<input type="hidden" name="infoid" value='<%=bean.getInfoid()%>' ID="Hidden1"/>
<td style="width:10%" class="m1" align="right">工号</td>
<td><input type="text" name="recordid" value='<%=bean.getUserid()%>' readonly ID="Text1"/></td>
<td style="width:15%" class="m1" align="right">姓名</td>
<td><input type="text" name="recordid" value='<%=bean.getUsername()%>' readonly ID="Text2"/></td>
</tr><tr>
<td style="width:20%" class="m1" align="right">入职时间</td>
<td><input type="text" name="recordid" value='<%=bean.getMountdate()%>' readonly ID="Text3"/></td>
<td><input type="submit" value="保存" ID="Submit1" NAME="Submit1"/></td>
<td><input type="button" value="删除" onclick="mountGuardDel('<%=bean.getInfoid()%>')" ID="Button1" NAME="Button1"/></td>
</tr>
</table>
</div>

<%}%>




</table>
</td>
</tr>
</form>
</table>
<SCRIPT language=JavaScript src="js/bottom.js"
type=text/JavaScript></SCRIPT>
</body>
</html>


div放在table之间
梅雪香 2006-10-30
  • 打赏
  • 举报
 回复
表格里不能这样用div啊,你在<tr>前加点文本你就会发现div根本不在你希望的位置上
改用隐藏表格行吧
xiaoyuer8217 2006-10-30
  • 打赏
  • 举报
 回复
help help
CSS隐藏属性display:none；visibility:hidden；overflow:hidden
前端CSS元素隐藏的知识（display:none；visibility:hidden；overflow:hidden；opacity: 0）
display: none 和display: block之间的切换出现过渡效果失效
原因：display: none是销毁当前dom节点，再次切换为display: block时会再创建节点，此时css选择器会重新赋予上去。所以不存在渐变动画。 解决方法：用opacity（透明度）去替代。
【经验总结】关于使用某些第三方插件库元素display:none后重新show不显示的问题；（display、opacity、宽高0的使用场景）
display：none 直接取消元素所占用的位置，后面元素看他就相当于不存在了； opacity：0 隐藏，但是其依旧占用位置； height、width：0 和display：none类似，但是...
有关display:block、display:table在IE、火狐的兼容性问题
最近在作项目的时候碰到一个问题，就是需要AJAX来交互显示两个table，按照常理，对于一个表格需要显示时，使用：display:block属性，不需要显示时使用display:none属性，而且这样做在IE浏览器中显示正常，没有任何问题。在火狐下就有问题了，表格始终只显示原来的60%左右的宽度。 　　然后通FireBug去看了下源码，调试下了，发现是display:block属性问题。
display:flex属性
什么是display:flex？（我来自逆战班） Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为flex布局。 1：先来了解一下display:flex 正常情况下 在一个盒子中，放置4个div，设置高度，宽度继承父元素，呈现如图排列方式，当我们给盒子加上display:flex时，再看一下 盒子内的4个div就...
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章