I have a table that represents a physical 12x8 grid. Each <td> contains the text name (A1-H12) of the grid co-ordinate. I've added the jquery-ui selectable interaction to the table. I want users to be able to select an arbitrary set of grid co-ordinates. As well as selecting by <td>, I'd like the user to be able to select entire rows and/or columns by clicking on the row or column <th>. Selection by <th> is causing me some difficulty:

 

1. How do I determine which <td>s are in the same column (or row) as the selected <th>?
2. Which selectable event should I use to move the selection from a <th> to the correct set of <td>s? stop, selected or selecting?

 

If someone had a good code example of real-world selectable use, I'd really appreciate the link.

 

My jquery (which only allows me to look at the selected objects since I'm very unsure of how to do things):

1. $(function(){
2.     $('#selectable').selectable({
3.         filter:'td,th',
4.         selected: function(event, ui){
5.             console.log(event);
6.             console.log(ui);
7.             var s=$(this).find('.ui-selected');
8.             console.log(s);
9.         }
10.     })
11. });

The table looks like this:

   

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