I am using the Handsontable plugin and when the user changes the values in the cell, it should turn yellow so they can keep track of what has been changed. In this case, yellow is class .changeInput. The tricky part is when you double click the cell to change it, this bees a textarea and no longer a td. Any ideas? Thanks in advance.

/

jQuery

$("textarea.handsontableInput").change(function (){ 
    //$(this).find(td).addClass('changeInput');
    $('.htNumeric .current').addClass('changeInput');
});

I am using the Handsontable plugin and when the user changes the values in the cell, it should turn yellow so they can keep track of what has been changed. In this case, yellow is class .changeInput. The tricky part is when you double click the cell to change it, this bees a textarea and no longer a td. Any ideas? Thanks in advance.

http://jsfiddle/PAH5J/

jQuery

$("textarea.handsontableInput").change(function (){ 
    //$(this).find(td).addClass('changeInput');
    $('.htNumeric .current').addClass('changeInput');
});

• javascript
• jquery
• html
• addclass
• handsontable

• you need to use event delegation and maybe "keyup" instead of change http://jsfiddle/PAH5J/4/ – Abraham Uribe Commented Oct 21, 2013 at 17:45
• @AbrahamUribe I need the changed td to stay yellow Also, this only seems to be affecting the textarea. – triplethreat77 Commented Oct 21, 2013 at 18:01
• only work for the last edited cell http://jsfiddle/PAH5J/6/ – Abraham Uribe Commented Oct 21, 2013 at 18:35
• @AbrahamUribe, I want all cells edited to stay yellow, is this possible? – triplethreat77 Commented Oct 21, 2013 at 18:38
• 1 like this http://jsfiddle/PAH5J/8/? – Abraham Uribe Commented Oct 21, 2013 at 20:22

1 Answer 1

to mark every cell that have change you can create a custom renderer and apply only if data("change") exists like this

//Custom renderer add class if the element have the data "change"
var myRenderer = function (instance, td, row, col, prop, value, cellProperties) {
  Handsontable.TextCell.renderer.apply(this, arguments);
  if($(td).data("change")){
      $(td).addClass('changeInput');
  }
};     
$('#example').handsontable({
data: data,
minSpareRows: 1,
colHeaders: true,
contextMenu: true,
  cells: function (row, col, prop) {//set the new renderer for every cell
    return {type: {renderer: myRenderer}};
  }
});
//afterChange get every cell and add class and data
$('#example').handsontable('getInstance').addHook('afterChange', function(changes) {
  var ele=this;
  $.each(changes, function (index, element) {
            $(ele.getCell(element[0],element[1])).addClass('changeInput').data("change",true);
});

$("#example").on("keyup","textarea.handsontableInput",function (){
$(this).addClass('changeInput');
}).on("blur","textarea.handsontableInput",function (){
$(this).removeClass('changeInput');
});       

http://jsfiddle/PAH5J/8/
EDIT
to move the highlighted area you can use the cellProperties instead of .data() like this

var myRenderer = function (instance, td, row, col, prop, value, cellProperties) {
     Handsontable.TextCell.renderer.apply(this, arguments);
     if (cellProperties.change) {//check for new property change in the cell
         $(td).addClass('changeInput'); //add the changeInput class to the actual td
     }
};    
$('#example1').handsontable('getInstance').addHook('afterChange', function(changes) {
    var ele=this;
    $.each(changes, function (index, element) {
         //add the changeInput class to the actual td
         $(ele.getCell(element[0],ele.propToCol(element[1]))).addClass('changeInput')
         //get the cell properties and create a new one "change"     
         //to check in the renderer
         ele.getCellMeta(element[0],ele.propToCol(element[1])).change=true;
    });    
});