<TD> 세포의 '좌표'를 jQuery를 사용하여 얻으십시오.

Question

저는 다른 웹 사이트를 만들고 있습니다. 아래는 HTML 마크 업과 질문입니다. 제발이 글의 벽에 기대지 말아주세요. 나는 자신의 물건을 알고있는 누군가에게는 어려운 문제는 아니지만 설명이 필요하다고 확신합니다.

<div id="0" class="cell" style="top: 0px; left: 0px;"> 
    <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
     <tbody> 
      <tr id="0"> 
       <td id="0">&nbsp;</td> 
       <td id="1">&nbsp;</td> 
       <td id="2">&nbsp;</td> 
       <td id="3">&nbsp;</td> 
       <td id="4">&nbsp;</td> 
       <td id="5">&nbsp;</td> 
       <td id="6">&nbsp;</td> 
       <td id="7">&nbsp;</td> 
       <td id="8">&nbsp;</td> 
       <td id="9">&nbsp;</td> 
       <td id="10">&nbsp;</td> 
       <td id="11">&nbsp;</td> 
       <td id="12">&nbsp;</td> 
       <td id="13">&nbsp;</td> 
       <td id="14">&nbsp;</td> 
       <td id="15">&nbsp;</td> 
      </tr> 
      <tr id="1"> 
       <td id="0">&nbsp;</td> 
       <td id="1">&nbsp;</td> 
       <td id="2">&nbsp;</td> 
       <td id="3">&nbsp;</td> 
       <td id="4">&nbsp;</td> 
       <td id="5">&nbsp;</td> 
       <td id="6">&nbsp;</td> 
       <td id="7">&nbsp;</td> 
       <td id="8">&nbsp;</td> 
       <td id="9">&nbsp;</td> 
       <td id="10">&nbsp;</td> 
       <td id="11">&nbsp;</td> 
       <td id="12">&nbsp;</td> 
       <td id="13">&nbsp;</td> 
       <td id="14">&nbsp;</td> 
       <td id="15">&nbsp;</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

이 마크 업은 전체 페이지를 채우기 위해 기와 종류의 pastern에서 반복됩니다. 비슷한 DIV는 다음과 같을 수 있습니다 : 당신이 이미 그것을 볼 수없는 경우, 내가 된 DIV로 분류 전체 페이지에 걸쳐 세포의 부하를 만드는거야

<div id="1" class="cell" style="top: 144px; left: 0px;"> 
    <!-- The rest of the table code here... --> 
</div> 

. 이제 사용자가 셀 (<td> 중 하나)에 클릭하면 좌표가 0, 1, 5으로 표시되도록하고 싶습니다. 이 예에서

, 0, 1, 5가 0의 ID로 DIV이다 5의 ID와 그 TR 소자 내부 1의 ID, 그리고 마지막으로 그 셀 DIV 내부 TR 소자. 이 좌표를 얻으려면 자바 스크립트 함수를 작성하고 싶었지만 전달할 매개 변수를 완전히 잃어 버렸고 좌표를 가져올 수있는 방법이 거의 없었습니다.

지금까지 한 번 클릭 이벤트 (?)를 함수에 전달하면 <td>의 부모 요소를보고 ID를 얻을 수 있다고 생각하십니까?

누구든지이 문제에 대한 해결책을 제공하거나 의견을 제공 할 수 있다면 크게 감사하겠습니다.

Answer 1

지정한 부모 요소를 반환하는 closest jQuery 함수를 사용하십시오. 이처럼

:

$("td").click(function() { 
    var parentDIVId = $(this).closest("div").attr("id"); 
    var parentTRId = $(this).closest("tr").attr("id"); 
    var myId = $(this).attr("id"); 
} 

Answer 2

는 쉬운 일이 될 것이다 그것을 here.

더 .closest() here

Answer 3

에 테스트 할 수

$('td').click(function(){ 
    var td = this.id; 
    var tr = $(this).closest('tr').attr('id'); 
    var div = $(this).closest('div').attr('id'); 
}); 

을 시도

$('td').click(function(){ 
$this = $(this); 
alert($this.closest('div').attr('id') + ',' + $this.closest('tr').attr('id') + ',' + $this.attr('id')); 
}); 

그러나 당신은 어떤 문제가 ..

1. 는
2. ID가 DOM 내에서 고유해야 ID를 같은 번호를 가질 수 없습니다 ...

Answer 4

가 시작할 유효하지 않기 때문에 번호가있는 ID라면 다른 해결책을 제시 할 것입니다.

ID는 기본적으로 색인 번호이므로 jQuery의 .index() 메소드를 사용하면 필요한 정보를 얻을 수 있습니다. 여기

테스트를 :http://jsfiddle.net/hBarW/

$('td').click(function(){ 
    var $th = $(this); 
    var td_idx = $th.index(); 
    var tr_idx = $th.closest('tr').index(); 
    var div_idx = $(this).closest('div').index(); 
    alert(td_idx + ' ' + tr_idx + ' ' + div_idx); 
});