如何更改Handsontable中更改的單元格的顏色？

Question

我正在使用Handsontable插件，當用戶更改單元格中的值時，它應該變成黃色，以便他們可以跟蹤已更改的內容。在這種情況下，黃色是類.changeInput。棘手的部分是當你雙擊單元格來改變它，這成爲一個textarea，不再是一個td。有任何想法嗎？提前致謝。

http://jsfiddle.net/PAH5J/

jQuery的

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

Answer 1

到有變化，你可以創建自定義渲染器和適用於僅當數據（ 「變」）存在這樣

//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.net/PAH5J/8/
編輯
將突出顯示的區域，您可以使用cellProperties代替。數據（）這樣的

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; 
    });  
});