選擇jquery-ui可選的列

Question

我有一張表，表示一個物理12x8網格。每個<td>包含網格座標的文本名稱（A1-H12）。我已經添加了jquery-ui selectable與表的交互。我希望用戶能夠選擇任意一組網格座標。除了選擇<td>s，我希望用戶能夠通過單擊行或列<th>來選擇整個行和/或列。選擇由<th>引起我一些困難：

1. 我如何確定哪些<td> s爲同一列（或行）作爲選擇<th>？
2. 我應該使用哪個可選事件將選擇從th移動到正確的<td> s？ stop，selected或selecting？

我的jQuery（只允許我看一下所選擇的對象，因爲我很不清楚如何做的事情）：

$(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> 

Answer 1

經過大量的試驗和錯誤，這是我想通了。行頭選擇將該類添加到<td>並撤銷對<th>的選擇。 colhead選擇對列執行相同的操作，但由於必須獲取列索引，因此會更復雜一些。

我相信這可能是更有效的，但我不知道怎麼辦。歡迎提出建議。

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