jquery - Change the class name of a cell in handsontable -

i want change class name of "td" in handsontable. use jquery "addclass". in css file, have specified color class name.

my css :

 .error  {      background-color : red;      color : blue;  }  

and jquery code :

  <script type="text/javascript">       $(document).ready(function(){         $('#submit_button_essai').click(function(){             var td;               td=(hot.getcell(1,1));              $(td).addclass("error");               $.post("ajax_insert_essai.php",{arr:data_essai}, insert_essai_callback);            });      }); 

i don't know how can assign class name 1 cell ! somemone can me please ?

there's easy way since handsontable built use case in mind!

you want use customrenderer option of cells attribute. apply renderer matching cells , fun stuff inside renderer. here how:

start defining renderer:

function customrender(instance, td, row, col, prop, value, cellproperties) {     // change type of renderer need; eg. if supposed     // checkbox, use checkboxrenderer instead of textrenderer     handsontable.renderers.textrenderer.apply(this, arguments);      // jquery selector td or add class name using native js     $(td).addclass("error");      return td; } 

as see, apply class every td give renderer to. it's matter of giving right cells. adding cells attribute:

var hot = new handsontable(container, {     data: data,     cells: function(row, col, prop) {         var cellproperties = {};          if (row === 0, col === 0) {             cellproperties.renderer = customrender; // uses function directly         }     } }); 

what end doing defining renderer on whichever cell want. of course add on render , not dynamically. can use second method similar this.

your click event 2 things:

1) recalculate cells option , update them

this 1 easy , follows example above. want modify cells apply renderer whichever cells want add class name to. after that, do:

hot.updatesettings({cells: newcellobject}); 

and that's it.

a second, more interesting option, define custom renderer on every cell. if this, want add logic of cells add class name inside renderer function; possible because renderer takes inputs row , column positions can following:

// fast search, use hack turn array strings var globalerrorcells = [[1,2]+'', [0,0]+''];   function customrender(instance, td, row, col, prop, value, cellproperties) {     // change type of renderer need; eg. if supposed     // checkbox, use checkboxrenderer instead of textrenderer     handsontable.renderers.textrenderer.apply(this, arguments);      // check if cell in our global array of cells include     if (globalerrorcells.indexof([row, col] + '')) {         // jquery selector td or add class name using native js         $(td).addclass("error");     }      return td; } 

and that's it! every time want add cell have class name added to, push cell coordinates global array , handsontable automatically render correctly next time render. this:

// assume we're inside click var cell = [1,2]+'' globalerrorcells.push(cell); hot.render(); 

and same goes removing class name, search cell remove , rid of globalerrorcells array.

i hope made sense! 1 last comment. if you're trying validation, recommend reading section on validators on handsontable page. can similar thing cells option pass in validator function. gets applied on render cells , if fails validation, automatically adds class cell can use css change :d