CSSでpositionを使用するには？

Question

<table id="tab"> 
    <tr><td class="here">dgd</td><td class="here">dfg</td></tr> 
    <tr><td class="here">fgf</td><td class="here">sg4</td></tr> 
</table> 


<table id="new"> 
    <tr><td id="al">sss</td></tr> 
</table> 

#tab td { 
    padding: 5px; 
    border: solid 1px red; 
} 

#new td { 
    padding: 5px; 
    height: 40px; 
     border: solid 1px green; 
    background-color: green; 
} 

#new { 
    display: none; 
} 

$(".here").click(function(){ 
    $("#new").show(); 
}) 

    $("#al").click(function(){ 
     alert('ok'); 
    }) 

LIVE：http://jsfiddle.net/HTHnK/

どのように私はjQueryのでは、追加位置のために、この例を修正することができますか？私は好きです - もし私がクリックしたら、テーブルid = newは、このクリックされたTDに私を見せてください。さらに、のテーブルID =新しいをクリックした場合、これは非表示にする必要があります。

どうすればいいですか？

Answer 1

あなたはこのようになりたいですか？

http://jsfiddle.net/HTHnK/6/

Answer 2

あなたはそれではなく、特定の領域内のクリックのクリックに応答しますページ全体のイベントハンドラを、したいです。特定の領域への対応からページを防ぐために

使用event.stopPropogation()：

$('.item').click(function(event){ 
    $('#context').show(); 
    event.stopPropogation(); 
}); 
$('body').click(function(){ 
    $('#context').hide(); 
}); 

jsfiddle

Answer 3

あなたは緑色のボックスがクリックされたセル（経由と同じ位置に移動しなければならないことを言っている場合クリックしたセルの子として付加するのと比較して絶対的な位置付け）、次のようなものを試すことができます：

$(document).on("click", function(e) { 
    var $el = $(e.target); 
    if ($el.hasClass("here")) { 
     $("#new").css({'left': e.target.offsetLeft, 
         'top': e.target.offsetTop}).show(); 
    } else { 
     $("#new").hide(); 
    } 
}); 

ドキュメントのクリックを処理します。クリックが「.here」セルのいずれかにある場合、緑色のボックスが移動し、そうでない場合は非表示になります。

デモ：http://jsfiddle.net/HTHnK/16/

Answer 4

新しいテーブルセルにソースセルからテキストを移動するために探していますか？

http://jsfiddle.net/dnrar/