Question

我有一个代表物理12x8网格的表。每个<td>包含网格坐标的文本名称（A1-H12）。我已将jquery-ui selectable 交互添加到表中。我希望用户能够选择一组任意的网格坐标。除了选择<td>之外，我还希望用户能够通过点击行或列<th>来选择整行和/或列。 <th>的选择给我带来了一些困难：

如何确定哪些<td>与选定的<th>位于同一列（或行）？
我应该使用哪个可选事件将选择从th移动到正确的<td>组？ 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');
            });
        }
    })
});

选择jquery-ui可选择的列

1 个答案: