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

sv_inが言ったように設定position: absoluteします。DIV

この行は、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 に答える
0

position:absolutedivにも設定します。またz-index、必要に応じて良いでしょう。:) http://www.w3schools.com/cssref/pr_class_position.asp

于 2012-04-19T20:01:44.283 に答える