Compare two cells and change the color if different

Tags: #<Tag:0x00007f8b2b0142b8>
#1

I want to make a function that changes the background color of td dynamically if the values of the two cells are different from each other.

Currently, there are already two other functions in the cell, is there a way to create a function without any error due to overlapping these two functions?

I’m going to compare these two
image

The first feature applied to this cell
image
Use a formula to indicate the sum of row values in this cell.

Second functionality applied to this cell
image
funtion to change background color to red when cell values exceed 255

#2

Hi @curlydoggi

I’ve done something like this https://jsfiddle.net/o9fLgsp3/2/, and I guess that it meets the requirements. The red background has a higher priority than the comparison logic. Is that correct?

#3

Thank you for your answer, Alexandra.

The above example does not change fluidly when I enter a new value or when an event occurs where the table value changes.

I want to change the values of cells as soon as they are modified, like using afterchange hook, but it is difficult to compare two different cells.

Is there a way?

#4

The cells method is executed after each render and that logic is reapplied each time you change a cell

exampl

The above example does not change fluidly when I enter a new value

what action did you take that hasn’t been updated in my demo?

#5

The function of turning the background color red above 225 should be applied to individual cells, but two cells have different values, making the background color yellow should not be applied to each cell, but two cells should be operated at the same time.

For example, if A1=20, B1=20, the background color should be gone, and if A1=20, B1=40, both cells should be yellow.

#6

OK, then please check this one https://jsfiddle.net/2Lbvkx9p/8/. It is not the most optimal way of coding, but it shows what is going on in the afterChange hook. I am manipulating classes of a row of change when the user changes a value in the first column. If you want to add the same actions for the 2nd column, you just need to attach the same logic for column === 1.
Does that meet the requirements now?

#7

It’s the way I wanted it to work. But you said this code is not the best way, is there any problem or disadvantage with this code?

#8

When you add the same logic for both columns, you will get https://jsfiddle.net/cpghyq0e/. The afterChange logic gets a lot of code repetition.
It will work. That’s not an issue. But it just does not look good. Ideally, I guess you could create a function that takes row index, column index, and a class name string and just run that for some conditions. But this is just a matter of writing style (nothing to do with the way Handsontable works).

#9

You’re not saying it’s a performance problem, but it’s a hard coding that’s complicated, right?

#10

Exactly :slight_smile:

#11