Question

We have a simple table with say (nxm matrix) and the user will randomly select a set of entries based on the following conditions.

Our layout is like this (just pseudo code)

<table>
   <thead>
      <tr>
          c:forEach 1...31
          <th></th>
      </tr>
   </thead>

   <tbody>
       <tr> // could be 30 | 40 | 50 rows
           <td>1...31</td> // Just mentioned that there would be as much cells as looped on the c:forEach above
       </tr>
   </tbody>
</table>

a] On cell selection we would like to flip the cell color (i.e. ) between blue, yellow. The color should toggle on a particular cell selection.
b] If the user selects the header panel (e.g. anything between 1…31) the corresponding column (i.e. all cells in that column) should toggle between blue, yellow

We were thinking using invisible checkboxes to do this, but we haven’t got the javascript (we use jquery) logic to select and unselect this correctly. need pointers here, to implement this capability.

Answer 1

You could do something like this, after adding appropriate css classes:

Deal with cells:

$('table#yourtable').find('tbody td').click( function(){
    $(this).toggleClass('yellow');
    // flip yellow on or off
    // you can figure out how to deal with other states
});

Deal with columns:

$('table#yourtable').find('thead th').click( function(){
    var col = $(this).prevAll().length; // had siblings, should be prevall
    $('table#yourtable').find('tbody tr').each( function(){
        $(this)
            .find('td:eq('+col+')')  // nth column
            .removeClass('yellow blue neutral') // reset colors
            .addClass('green'); // add a color
    });
});

Not tested, and this can undoubtedly be optimized further, but it should give you some ideas.