클릭하면 현재 td 세포의 위치 찾기

사용자가 클릭 한 현재 셀을 찾으려고합니다. 예를 들어 사용자가 첫 번째 셀을 클릭 한 경우 1을 반환하려고합니다. 10 번째 셀을 클릭하면 10을 반환하려고합니다. 테이블에 총 16 개의 셀이 있습니다.클릭하면 현재 td 세포의 위치 찾기

<html> 
     <head> 
     <title>Lights Out!</title> 
     <script type="text/javascript" src="jquery-1.4.js"></script> 

     <script type= "text/javascript"> 

     //The d 
     var gameBoard = new Array(getTdCount()) 

     for(var i =0; i < getTdCount(); i++) 
     { 
      gameBoard[i] = 0; 
     } 





     function getTdCount() 
     { 
      return $("td").length; 
     } 

     $(document).ready(function() 
     { 

      $("#board tr td").hover(function() 
      { 
       $(this).css('border-color', '00FF33'); 
      }, 
      function() 
      { 
       $(this).css('border-color', 'black') 
      }) 

      var $offProtoType = $('#offprototype').css('display', 'block').removeAttr('id')  
      $('td').append($offProtoType) 

      $("#board tr td").click(function() 
      { 
       $("img", this).attr('src', 'on.png') 

      }) 

     }); 


     </script> 

     <style type="text/css"> 
     td 
     { 
      border-style:solid; 
      border-color:black; 
      background-color:black; 
      float:left; 
     } 

     </style> 


     </head> 
     <body> 

     <img style = "display:none" id="offprototype" src ="off.png"> 
     <img style = "display:none" id="onprototype" src ="on.png"> 

     <table id="board" border="3" bgcolor="black" align="center"> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
      <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
      </tr> 
     </table> 
     <input type="button" value="Shuffle" onclick="change()"/> 
     </body> 
    </html>

출처

2010-02-02 Steffan

사용 index :

var $tds = $('#board tr td'); 
$tds.click(function(){ 
    // Gets the 0 based index, and add 1: 
    var num = $tds.index(this) + 1; 
    $("img", this).attr('src', 'on.png') 
});

우리는 먼저 #board tr td 검색 결과를 캐시, 그래서 우리는 각 클릭에 그것을 볼 필요가 없습니다.

다음으로 우리는 index 함수를 사용하여 td 요소의 전체 결과에서 현재 td의 색인을 찾습니다.

마지막으로 index은 0 기반 카운트를 반환하므로 1을 더합니다.

업데이트 : jQuery를 1.4

는이 인스턴스는 우리가 jQuery를 1.4의 새로운 index() 기능을 사용할 수 있었다 없습니다. index() 매개 변수없이 형제의 컨텍스트에서 요소의 인덱스를 가져옵니다. 이 경우 형제뿐만 아니라 테이블에있는 모든 td 요소의 컨텍스트에서 필요합니다.

어떠한 인자가있는 .index() 메소드에 전달되지 않으면
는, 반환 값은 동위 원소로 jQuery 오브젝트 대하여 내의 첫 번째 요소의 위치를 나타내는 정수이다. 이처럼

출처

2010-02-02 01:27:39

jQuery 1.4를 사용하면 var num = $ (this) .index() + 1; – user113716

@patrick 이것은이 속기를 사용할 수없는 경우입니다. 이유에 대한 설명을 제공하기 위해 내 대답을 업데이트했습니다. –

네 말이 맞아. 나는이 질문을 충분히 면밀히 읽지 않았고 어떤 이유에서인지 단순히 행 단위로 가정했다. 그것을 잡아 주셔서 감사합니다. – user113716

다음 cellIndex 속성을 사용할 수 있습니다

var cells = $('#board td') 
cells.click(function() { alert(cells.index(this) + 1); });

출처

2010-02-02 01:28:14 SLaks

http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-82915075

는주의 : cellIndex 항상이 경우 0입니다 사파리 2 컨커 러에서 문제를, 기능 테스트 및 대체 사용할 수 있습니다.

출처

2010-02-02 07:16:25 Garrett

클릭하면 현재 td 세포의 위치 찾기

답변

관련 문제