當單擊表格單元格時，得到隱藏的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以顯示在表格單元格下方

回答

相關問題