jquery-ui를 선택할 수있는 열을 선택하십시오.

Question

실제 12x8 그리드를 나타내는 테이블이 있습니다. 각 <td>에는 그리드 좌표의 텍스트 이름 (A1-H12)이 들어 있습니다. 테이블에 jquery-ui selectable 상호 작용을 추가했습니다. 사용자가 임의의 그리드 좌표 세트를 선택할 수 있기를 바랍니다. <td>을 선택할뿐만 아니라 사용자가 행 또는 열 <th>을 클릭하여 전체 행 및/또는 열을 선택할 수 있기를 바랍니다. 동일한 열 (또는 행)에있는 <td>의

1. 는 어떻게 확인합니까 선택한 <th> 등 : <th>에 의한 선택은 좀 어려움의 원인?
2. 선택 항목을 th에서 올바른 세트 <td>으로 이동하려면 어떤 선택 가능한 이벤트를 사용해야합니까? stop, selected 또는 selecting?

   $(function(){ 
   $('#selectable').selectable({ 
       filter:'td,th', 
       selected: function(event, ui){ 
       console.log(event); 
       console.log(ui); 
        var s=$(this).find('.ui-selected'); 
       console.log(s); 
        } 
   }) 
   
   }); 
   

   를 표는 다음과 같습니다 :

   <table id='selectable'> 
       <tr> 
       <th>&nbsp;</th><!-- empty cell over row labels--> 
       <th class='colhead'>1</th> 
   ... 
       <th class='colhead'>12</th> 
       </tr> 
       <tr> 
       <th class='rowhead'>A</th> 
       <td>A1</td> 
   ... 
       <td>A12</td> 
       </tr> 
   ... 
       <tr> 
       <th class='rowhead'>H</th> 
       <td>H1</td> 
   ... 
       <td>H12</td> 
       </tr> 
   </table> 
   

   (내가 일을하는 방법을 아주 확실 해요 때문에 나를 선택한 객체를 볼 수 있습니다 만)

내 JQuery와

Answer 1

많은 시행 착오 끝에 내가 알아 낸 것입니다. 행 헤드 선택은 클래스를 <td>에 추가하고 <th>의 선택을 취소합니다. 컬럼 헤드 선택은 컬럼에서도 동일하지만 컬럼 인덱스를 가져와야하기 때문에 조금 더 복잡합니다.

나는 이것이 더 효율적일 수 있다고 생각하지만, 어떻게해야할지 모르겠다. 제안을 환영합니다.

$(function(){ 
    $('#selectable').selectable({ 
     filter:'td,th', 
     stop: function(event, ui){ 
      $('#selectable th.ui-selected.rowhead').siblings('td').addClass('ui-selected').end().removeClass('ui-selected'); 
      $('#selectable th.ui-selected.colhead').each(function(i){ 
       col= $(this).parent().children().index($(this)) +1; 
       console.log(col) 
       $(this).closest('tr').siblings().children('td:nth-child('+col+')').addClass('ui-selected'); 
       $(this).removeClass('ui-selected'); 
      }); 
     } 
    }) 
});