public/edit_table.js

   1 $(document).ready( function() {
   2
   3 var cell_blur = function() {
   4         console.debug( 'cell_blur'
   5                 , this
   6                 , $(this).val()
   7         );
   8         var content = $(this).val();
   9         if ( 0 ) { // leave delimiters in edited cells visible
  10                 var vals = content.split('¶');
  11                 content = vals.join('<span class=d>¶</span>');
  12         }
  13         var cell = $('<td>'+content+'</td>');
  14         $(this).replaceWith( cell );
  15         console.info( cell );
  16 }
  17
  18 var cell_click = function(event) {
  19         console.debug( 'cell_click'
  20                 , this
  21                 , event
  22                 , $(this).text()
  23         );
  24         var content = $(this).text(); // we don't want para markup
  25         var rows = content.split('¶').length * 2 + 1;
  26         var textarea = $('<textarea rows='+rows+'/>');
  27         textarea.val( content );
  28         $(this).html( textarea );
  29         textarea.focus();
  30         textarea.blur( cell_blur )
  31 };
  32
  33
  34 console.info('double-click on cell to edit it');
  35 $('table td').live( 'dblclick', cell_click );
  36
  37 }); // document.ready
  38
  39