Masha Masha - 26 days ago 4
Javascript Question

How to set table cell appearance depending on table cell value in Handsontable

I am using Handsontable for PHP with MySQL database.

In my table a have 6 columns as follows:

| Product | Qty. | Good | Damaged | Cut & Torn |

Qty.= Good + Damaged + Cut & Torn

First I'll enter the "Product" and "Quantity" in the table and at that time the values of "Good", "Damaged", "Cut & Torn" will be set automatically to zero. But when I enter a value in any of the cell "Good", "Damaged" or "Cut & Torn" the cell's background will be red until the total values of those three cells ("Good", "Damaged" and "Cut & Torn") will equal to the value of the "Quantity" cell.
Now I need some guide to achieve that via JS ?
Any help will be appreciated.

Answer

You may use this solution:

Handsontable.hooks.add('afterRender', function() {
var d = this;
var quantity = d.getDataAtCol(1);
var good = d.getDataAtCol(2);
var damaged = d.getDataAtCol(3);
var cut_torn = d.getDataAtCol(4);


$.each(quantity,function(i,v){
    if (+good[i] !== 0 || +damaged[i] !== 0 || +cut_torn[i] !== 0){
 if ((+good[i]] + +damaged[i] + +cut_torn[i]) != v ) {
  $(d.getCell(i,1)).css({'background':'yellow'});
  $(d.getCell(i,2)).css({'background':'red'});
  $(d.getCell(i,3)).css({'background':'red'});
  $(d.getCell(i,4)).css({'background':'red'});
 } 
 }
});
});
Comments