テーブルセルがクリックされたときにテーブルセルの下に表示する非表示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>

クリックした表のセルのすぐ下に表示されるようにしたいと思います。私のjavascriptはポジションを取っているようですが、この情報をdivに渡すのに問題があります。 DOCTYPEを削除するとこの作業ができますが、私が作業しているプロジェクトではdoctypeが必要です。助言がありますか？

出典

2012-04-19 b10hazard

DIVの場合、position: absoluteをsv_inと設定します。

この行はまた、IEでのトラブルを引き起こす可能性があります。あなたがIEでこれを実行します場合

pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(divToggle).offsetLeft;

は、三項演算子は、真の条件を検出し、?後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

doctypeで動作する 'px'を追加してください。ありがとうございました。今はかなりうまくいく。私はちょうど位置を修正する必要がありますが、少なくとも今はページの上にぶら下がっていない。 – b10hazard

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

出典

2012-04-19 20:01:44

よりもむしろ絶対位置をいじって、私はあなたのdivを表示または非表示にする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

テーブルセルがクリックされたときにテーブルセルの下に表示する非表示divを取得

答えて

関連する問題