当单击表格单元格时，得到隐藏的div以显示在表格单元格下方

我有一个div，当单击表格单元格时，我想直接出现在表格单元格下方。这是到目前为止我的代码示例...当单击表格单元格时，得到隐藏的div以显示在表格单元格下方

<!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>

我想隐藏的下载div来直接显示被点击的表格单元格下面。我的JavaScript似乎得到的位置，但我无法将此信息传递给div。删除DOCTYPE将使这项工作，但对于我正在处理的项目，我需要一个文档类型。有什么建议么？

来源

2012-04-19 b10hazard

设置position: absolute作为sv_in说DIV说。

这条线还可以在IE造成的烦恼：

pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(divToggle).offsetLeft;

如果你在IE中运行此，三元运营商认定条件真实，返回?后true。

交换机的线路：

pos_x = (event.offsetX)?event.offsetX:event.pageX-document.getElementById(divToggle).offsetLeft;

而且对下一行同为pos_y。

当使用<!DOCTYPE html>也有单位在样式定义中使用：

document.getElementById(divId).style.left = pos_x+'px'; 
document.getElementById(divId).style.top = pos_y+'px';

来源

2012-04-19 20:10:07 Teemu

将'px'添加到doctype中。谢谢。现在它工作得很好。我只需要更正定位，但至少现在它不会挂在页面的顶部。 – b10hazard 2012-04-19 20:37:43

设置position:absolute以及该div。如果需要的话，z-index也不错。 :) http://www.w3schools.com/cssref/pr_class_position.asp

来源

2012-04-19 20:01:44

，而不是绝对定位搞乱，我建议你使用的CSS显示属性来显示或隐藏股利。这将允许html自动定位div。以下是一些示例代码：

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

来源

2012-04-19 21:58:40

这也工作得很好。结合使用Teemu的'px'建议可以完美地完成所有工作。我希望我能给你两个接受的答案。谢谢！ – b10hazard 2012-04-20 15:35:33

当单击表格单元格时，得到隐藏的div以显示在表格单元格下方

回答

相关问题