选择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'); 
      }); 
     } 
    }) 
});