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'); 
    }) 

라이브 : http://jsfiddle.net/HTHnK/

어떻게 jQuery를에 추가 위치에 대한 예를 수정할 수 있습니까? 나는 ~을 클릭하면 테이블 id = new이 클릭 된 TD에 나를 보여 주어야한다. 또한 내가 외부 테이블 id = new 클릭 한 다음 숨겨야합니다.

어떻게 만들 수 있습니까?

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/