Question

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

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

Answer 2

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

Answer 3

将position: absolute设为DIV为sv_in表示。

此行也可能导致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';

单击表格单元格时，获取隐藏的div以显示在表格单元格下方

3 个答案: