0

我有一个 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。有什么建议么？

4

3 回答 3

1

我建议您使用 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>
于 2012-04-19T21:58:40.380 回答
0

也设置position:absolute为 div。z-index如果需要，也很好。:) http://www.w3schools.com/cssref/pr_class_position.asp

于 2012-04-19T20:01:44.283 回答
0

设置position: absolute为DIV如sv_in 所说。

此行也可能在 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';
于 2012-04-19T20:10:07.233 回答