[whatwg] [WA1] Attribute-based selection system

[Matthew Raymond]

J. Graham wrote:
> On Sat, 25 Jun 2005, Matthew Raymond wrote:
>>  This is a specification of my selection system that I discussed over 
>>several previous messages. A few modifications have been made since then, so 
>>reference this rather than previous messages.
> 
> How would you allow different selections for different columns in a table 
> (i.e. I want to select one row per column)?

    I can't think of a scenario where you can select any element within 
each column and also have a semantic reason for elements in each column 
to be on specific rows relative to elements in the other columns. If the 
reason for the alignment is PRESENTATIONAL, however, CSS can accomplish 
what you want with the following example:

| <table>
|   <tbody>
|     <tr>
|       <td>
|         <ul selection="single auto">
|           <li selected>Item 1</li>
|           <li selected>Item 2</li>
|           <li selected>Item 3</li>
|         </ul>
|       </td>
|       <td>
|         <ul selection="single auto">
|           <li selected>Item 1</li>
|           <li selected>Item 2</li>
|           <li selected>Item 3</li>
|         </ul>
|       </td>
|       <td>
|         <ul selection="single auto">
|           <li selected>Item 1</li>
|           <li selected>Item 2</li>
|           <li selected>Item 3</li>
|         </ul>
|       </td>
|     </tr>
|   </tbody>
| </table>

    Also, you can simple put tables within tables. Modern browsers 
handle rendering of nested tables quite easily.

    Wait, there's a better way to handle this. Use <col>, but allow it 
to be overridden by <tr>:

| <table>
|   <colgroup>
|     <col id="selection1" selection="single auto">
|     <col id="selection2" selection="single auto">
|     <col id="selection3" selection="single auto">
|   </colgroup>
|   <tbody>
|     <tr id="colSelect" selection="single auto">
|       <th selected>Col 1</th>
|       <th>Col 2</th>
|       <th>Col 3</th>
|     </tr>
|     <tr>
|       <td selected>Item 1</td>
|       <td selected>Item 1</td>
|       <td selected>Item 1</td>
|     </tr>
|     <tr>
|       <td>Item 2</td>
|       <td>Item 2</td>
|       <td>Item 2</td>
|     </tr>
|     <tr>
|       <td>Item 3</td>
|       <td>Item 3</td>
|       <td>Item 3</td>
|     </tr>
|   </tbody>
| </table>

    Still, I really think we're wandering into the Land That Use Cases 
Forgot. This really strikes me as being three <select>-type controls 
next to each other, with a table used to align everything for purposes 
of presentation.

> What would the DOM interface look like?

    I'm no Javascript/DOM expert, but I'm thinking like this:

| interface HTMLElement : Element {
|            attribute DOMString       id;
|            attribute DOMString       title;
|            attribute DOMString       lang;
|            attribute DOMString       dir;
|            attribute DOMString       className;
|
|   readonly attribute HTMLElement     selectionContainer;
|            attribute HTMLSelection   selection;
|            attribute boolean         selectable;
|            attribute boolean         selected;
| };
|
| interface HTMLSelection {
|   readonly attribute long            length;
|   readonly attribute HTMLCollection  elements;
|            attribute long            selectedIndex;
|            attribute boolean         disabled;
|            attribute boolean         multiple;
|            attribute boolean         childDefault;
|            attribute boolean         tree;
|            attribute boolean         allowZero;
| };