单击表格单元格后，将在表格单元格下方显示一个隐藏的div
[英]get a hidden div to display below a table cell when the table cell is clicked
问题描述
I have a div that I want to appear directly below a table cell when the table cell is clicked. 
我有一个div，当单击表格单元格时，我想直接显示在表格单元格下方。 Here is a sample of my code so far... 到目前为止，这是我的代码示例...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript">
function toggleDownloadSelectionDialog(divToggle,divId,event){
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(divToggle).offsetLeft;
pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById(divToggle).offsetTop;
alert(pos_y+" "+pos_x+" "+divId);
document.getElementById(divId).style.top = pos_y;
document.getElementById(divId).style.left = pos_x;
document.getElementById(divId).style.display = 'block';
}
</script>
</head>
<body>
<div class="div_downloadDialog" id="div_hidden1" style="display: none; top: 0; left: 0; position: absolute;">This div is hidden</div>
<table class="Oligo_Diversity">
<tr>
<td>blah</td><td>blah</td><td>blah</td>
</tr>
<tr>
<td><div id="div_toggle1" onclick="toggleDownloadSelectionDialog('div_toggle1','div_hidden1',event);">click here for download dialog</div></td>
<td>blah</td>
<td>blah</td>
</tr>
</table>
</body>
</html>
I would like the hidden download div to appear directly below the table cell it is clicked on. 我希望隐藏的下载div直接出现在单击它的表格单元格下面。 My javascript seems to get the position but I'm having trouble passing this information to the div. 我的javascript似乎可以找到位置，但是我无法将此信息传递给div。 Removing the DOCTYPE will make this work but for the project I'm working on I need a doctype. 删除DOCTYPE将使这项工作有效，但是对于我正在从事的项目，我需要一个doctype。 Any suggestions? 有什么建议么？
3 个解决方案
解决方案1
1 2012-04-19 21:58:40
Rather than messing with absolute positioning, I suggest you use the css display attribute to show or hide your div. 建议您不要使用绝对定位，而应使用css display属性显示或隐藏div。 This will allow the html to automatically position the div. 这将允许html自动定位div。 Here is some example code: 这是一些示例代码：
<html>
<head>
<script type="text/javascript">
function expand(id) {
document.getElementById(id).style.display = 'block';
}
function hide(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</head>
<body>
<table><tr>
<td valign="top">
<div style="cursor:pointer" onclick="expand('expand1')">Click to Expand td 1</div>
<div id="expand1" style="cursor:pointer;display:none" onclick="hide('expand1')">
Click to hide td 1 expansion
</div>
</td>
<td valign="top">
<div style="cursor:pointer" onclick="expand('expand2')">Click to Expand td 2</div>
<div id="expand2" style="cursor:pointer;display:none" onclick="hide('expand2')">
Click to hide td 2 expansion
</div>
</td>
</tr></table>
</body>
</html>
解决方案2
0 2012-04-19 20:01:44
set position:absolute as well to the div. 设置position:absolute对div也是如此。 Also z-index would be good, if needed. 如果需要， z-index也会很好。 :) http://www.w3schools.com/cssref/pr_class_position.asp :) http://www.w3schools.com/cssref/pr_class_position.asp
解决方案3
0 已采纳 2012-04-19 20:10:07
Set position: absolute for the DIV as sv_in said. 设置position: absolute sv_in表示DIV position: absolute 。
This line also may cause troubles in IE: 此行也可能导致IE中的麻烦：
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(divToggle).offsetLeft;
If you'll run this in IE, ternary operator finds the condition true and returns true after ? 如果要在IE中运行，三元运算符将找到条件true，并在?之后返回true ? . 。
Switch the line to: 切换到：
pos_x = (event.offsetX)?event.offsetX:event.pageX-document.getElementById(divToggle).offsetLeft;
And the same on next line for pos_y . 和pos_y下一行相同。
When using <!DOCTYPE html> also units have to be used in style definitions: 使用<!DOCTYPE html>还必须在样式定义中使用单位：
document.getElementById(divId).style.left = pos_x+'px';
document.getElementById(divId).style.top = pos_y+'px';
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.