title: selecting a column with jquery-ui selectable
body: <p>I have a table that represents a physical 12x8 grid. Each <code>&lt;td&gt;</code> contains the text name (A1-H12) of the grid co-ordinate. I've added the jquery-ui <em><a href="http://jqueryui.com/demos/selectable/" rel="nofollow noreferrer">selectable</a></em> interaction to the table.  I want users to be able to select an arbitrary set of grid co-ordinates. As well as selecting <code>&lt;td&gt;</code>s I'd like the user to be able to select entire rows and/or columns by clicking on the row or column <code>&lt;th&gt;</code>.  Selection by <code>&lt;th&gt;</code> is causing me some difficulty:</p>
  
  <ol>
  <li>How do I determine which <code>&lt;td&gt;</code>s are in the same column (or row) as the selected <code>&lt;th&gt;</code>?</li>
  <li>Which selectable event should I use to move the selection from a <code>th</code> to the correct set of <code>&lt;td&gt;</code>s? <a href="http://jqueryui.com/demos/selectable/#event-stop" rel="nofollow noreferrer">stop</a>, <a href="http://jqueryui.com/demos/selectable/#event-selected" rel="nofollow noreferrer">selected</a> or <a href="http://jqueryui.com/demos/selectable/#event-selecting" rel="nofollow noreferrer">selecting</a>?</li>
  </ol>
  
  <p>My jquery (which only allows me to look at the selected objects since I'm very unsure of how to do things):</p>
  
  <pre><code>$(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); 
        }
   })
  
  });
  </code></pre>
  
  <p>The table looks like this:</p>
  
  <pre><code>&lt;table id='selectable'&gt;
    &lt;tr&gt;
       &lt;th&gt;&amp;nbsp;&lt;/th&gt;&lt;!-- empty cell over row labels--&gt;
       &lt;th class='colhead'&gt;1&lt;/th&gt;
  ...
       &lt;th class='colhead'&gt;12&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
       &lt;th class='rowhead'&gt;A&lt;/th&gt;
       &lt;td&gt;A1&lt;/td&gt;
  ...
       &lt;td&gt;A12&lt;/td&gt;
    &lt;/tr&gt;
  ...
    &lt;tr&gt;
       &lt;th class='rowhead'&gt;H&lt;/th&gt;
       &lt;td&gt;H1&lt;/td&gt;
  ...
       &lt;td&gt;H12&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>