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
   9         var x = $(this).parent().attr('cellIndex');
  10         var y = $(this).parent().parent().attr('rowIndex');
  11
  12         var content = $(this).val();
  13         if ( 0 ) { // leave delimiters in edited cells visible
  14                 var vals = content.split('¶');
  15                 content = vals.join('<span class=d>¶</span>');
  16         }
  17
  18 //      var cell = $('<td>'+content+'</td>');
  19         $(this).replaceWith( content );
  20
  21         var name = $('table tr th:nth('+x+') > a').text();
  22         console.info( x, y, name, content );
  23 }
  24
  25 var cell_click = function(event) {
  26         console.debug( 'cell_click'
  27                 , this
  28                 , event
  29                 , $(this).text()
  30         );
  31         var content = $(this).text(); // we don't want para markup
  32         var rows = content.split('¶').length * 2 + 1;
  33         var textarea = $('<textarea rows='+rows+'/>');
  34         textarea.val( content );
  35         $(this).html( textarea );
  36         textarea.focus();
  37         textarea.blur( cell_blur )
  38 };
  39
  40
  41 console.info('double-click on cell to edit it');
  42 $('table td').live( 'dblclick', cell_click );
  43
  44 }); // document.ready
  45
  46