2011-05-06 10 views
0

두 개의 표가 있습니다. 첫 번째 행은 높이가 높고 7 개의 tds가 있습니다.jquery는 조건에 따라 표의 마지막 셀을 선택합니다.

두 번째 행은 6 행이며 7 tds를 포함합니다.

첫 번째 표에서 td를 클릭하면 클래스 'x'가있는 해당 열의 표 2에있는 마지막 셀에 'x'클래스가 제거되고 'y'클래스가 추가됩니다. 난 해당 항목을 선택하는 처리했다

동일한 열 등, 그 클래스를 가질 것이다 위 세포가 제거 'X'및 클래스 'Y'를 클릭 첨가하고, 그래서 다음 ... 당신은 'n 번째-COL'

$('#table1 td').click(function(){ 

    var col = ($(this).index()+1); 

    $('#table2 td:nth-col('+col+')').removeClass('x').addClass('y'); 

}); 

그러나 행을 선택하는 방법 단지 문이 안 열려 알아낼를 선택할 수있는 플러그인을 사용!

당신이 다음 td 요소 (셀)를 기본적으로 네 개의

+0

)' – Mottie

답변

2

플러그인 없이도 할 수 있습니다. 행을 역순으로 진행하여 N 번째 td 요소를 확인하십시오. 처음 발견 한 루프에서 빠져 나옵니다. 이것은 간단한 해결책이며 수천 개의 행/열을 처리 할 수 ​​있도록 적절히 최적화되지 않았을 수 있습니다. :)

라이브 데모 : 나는 그`n 번째 자녀()`이 아닌`n 번째-COL (해야한다고 생각 http://jsfiddle.net/yydZ3/1/

//Set all classes to x 
$('td').addClass('x'); 

$('td').click(function(){ 
    var $this = $(this); 
    var col = $this.index(); 

    //Iterate through rows in reverse order 
    $($('tr').get().reverse()).each(function(){ 
     var $cell = $(this).find('td:eq('+col+')'); 
     if($cell.hasClass('x')){ 
      //Found one, this must be the last in this column 
      $cell.removeClass('x').addClass('y'); 

      //Exit out of each loop 
      return false; 
     } 
    }); 
}); 
1

는 적절한 tr (행)을 선택 연결 만들려고 노력 메신저 것에 대해 계속 메신저 궁금해하는 경우 :

$('#table2 tr:eq('+row+') td:eq('+col+')').removeClass('x').addClass('y'); 

는보기 매우 기본적인 테스트 : http://jsfiddle.net/MgTGf/1/

관련 문제