單擊表格單元格后，將在表格單元格下方顯示一個隱藏的div
[英]get a hidden div to display below a table cell when the table cell is clicked
問題描述
我有一個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將使這項工作有效，但是對於我正在從事的項目，我需要一個doctype。 有什么建議么？
3 個解決方案
解決方案1
1 2012-04-19 21:58:40
建議您不要使用絕對定位，而應使用css display屬性顯示或隱藏div。 這將允許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>
解決方案2
0 2012-04-19 20:01:44
設置position:absolute對div也是如此。 如果需要， z-index也會很好。 :) http://www.w3schools.com/cssref/pr_class_position.asp
解決方案3
0 已采納 2012-04-19 20:10:07
設置position: absolute sv_in表示DIV position: absolute 。
此行也可能導致IE中的麻煩：
pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(divToggle).offsetLeft;
如果要在IE中運行，三元運算符將找到條件true，並在?之后返回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';
顯示：表格單元格div忽略溢出：隱藏
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.