tablesorter widgets content editable changed rows by html dom element code example

Example: tablesorter widgets changed rows by html dom element

$(function() {  $("#table")    .tablesorter({      theme : 'blue',      widgets: ['editable'],      widgetOptions: {        editable_columns       : [0,1,2],       // or "0-2" (v2.14.2); point to the columns to make editable (zero-based index)        editable_enterToAccept : true,          // press enter to accept content, or click outside if false        editable_autoAccept    : true,          // accepts any changes made to the table cell automatically (v2.17.6)        editable_autoResort    : false,         // auto resort after the content has changed.        editable_validate      : null,          // return a valid string: function(text, original, columnIndex) { return text; }        editable_focused       : function(txt, columnIndex, $element) {          // $element is the div, not the td          // to get the td, use $element.closest('td')          $element.addClass('focused');        },        editable_blur          : function(txt, columnIndex, $element) {          // $element is the div, not the td          // to get the td, use $element.closest('td')          $element.removeClass('focused');        },        editable_selectAll     : function(txt, columnIndex, $element) {          // note $element is the div inside of the table cell, so use $element.closest('td') to get the cell          // only select everthing within the element when the content starts with the letter "B"          return /^b/i.test(txt) && columnIndex === 0;        },        editable_wrapContent   : '<div>',       // wrap all editable cell content... makes this widget work in IE, and with autocomplete        editable_trimContent   : true,          // trim content ( removes outer tabs & carriage returns )        editable_noEdit        : 'no-edit',     // class name of cell that is not editable        editable_editComplete  : 'editComplete' // event fired after the table content has been edited      }    })    // config event variable new in v2.17.6    .children('tbody').on('editComplete', 'td', function(event, config) {      var $this = $(this),        newContent = $this.text(),        cellIndex = this.cellIndex, // there shouldn't be any colspans in the tbody        rowIndex = $this.closest('tr').attr('id'); // data-row-index stored in row id      // Do whatever you want here to indicate      // that the content was updated      $this.addClass( 'editable_updated' ); // green background + white text      setTimeout(function() {        $this.removeClass( 'editable_updated' );      }, 500);      /*      $.post("mysite.php", {        "row"     : rowIndex,        "cell"    : cellIndex,        "content" : newContent      });      */    });});