Add a background color to the cell

Tags: #<Tag:0x00007efc60c3a178>
#1

Hi, I want to change the background-color of the cell by custom method of the right-click menu.But when I add rows and cols or modify the value of other cells,the backgroud-color will disappear.By the way, I created it in vue.This is the code I set the background-color.
var tar = this.getCell(startRow, startCol);
tar.style.backgroundColor = “blue”;

#2

Hey @759603225

I recommend using

instance_name.setCellMeta(row, col, 'className', 'your_class')

1 Like
#4

It is like this?
cells(row, col, prop){ this.instance.setCellMeta(row, col, 'class', 'lightblue-bg'); } .lightblue-bg {background-color: lightblue;}
But it doesn’t work.

#5

Try to change class to className

this.instance.setCellMeta(row, col, 'className', 'lightblue-bg');

and add the .handsontable to the CSS settings

.handsontable .lightblue-bg {
  background-color: lightblue;
}
1 Like
#6

thanks, I will try it

#7

I have encountered the same problem as you. please Is your problem solved ?

#8

Hey @jksoncao

have you tried the solution for the code above? If that did not work share your settings and I’ll try to help.

#9

I tried it, but it didn’t work. My handsontable version is 7.1.0, this is my code snippet.
css code:

.selected-td {
background-color: red;
}

vue-js code:
Handsontable.hooks.add(“afterChange”, function (changes, source) {
if (source === ‘edit’) {
changes.forEach(([row, prop, oldValue, newValue]) => {
if (newValue !== oldValue && row > 0 && prop < 9) {
//set background color
const className = this.getCellMeta(row, prop).className;
//remove before class
if(className && className.lastIndexOf(‘selected-td’) > 0){
const index = className.indexOf(‘selected-td’);
this.setCellMeta(row, prop, ‘className’, className.substring(0, index) + className.substring(index+1, className.length));

            this.setCellMeta(row, prop, 'className', this.getCellMeta(row, prop).className + ' selected-td');
          }else{
 
            this.setCellMeta(row, prop, 'className','selected-td');
          }
        }
      })
    }
    this.render();
  })
#10

Can you tell me what’s the goal, @jksoncao ?
I see that you’re searching for other elements as well - the lastIndexOf call.

What happens when you execute the code:

  1. There’s a class in the DOM
  2. No class and no CSS effect
  3. You get a console error
  4. Browser crashes (infinite loop)

ps. it would be much better if you could share the code via JSFiddle http://jsfiddle.net/k5cqjz8t/ - it makes it easier to share once we find an appropriate solution.

#11

I want to change the background color of the cell when changing the cell data. When modifying other cells again, the cell style of the newly changed style will not be cleared, and finally click the save button to clear these styles. I am implementing these functions in vue.

code:
mounted() {
Handsontable.hooks.add(“afterChange”, function (changes, source) {
if (source === ‘edit’) {
changes.forEach(([row, prop, oldValue, newValue]) => {
this.setCellMeta(row, prop, ‘className’,‘selected-td’);
})
}
this.render();
})

}

‘selected-td’ is class name

#12

Could you load all those scripts into this JSFiddle http://jsfiddle.net/k5cqjz8t/ (and SAVE to be able to share the project)?

#13

Ok, but I will report my error when I put my code in, but I don’t know why.

#14

i load all those scripts into this http://jsfiddle.net/ep8fbzx4/2/

#15

maybe you can try to add the .handsontable to the CSS settings. I didn’t see it in your code.

`.handsontable .selected-td { 
      background-color：red; 
  } 
`
#16

it is ok,thanks
I used this method in the VUE component before.
<style scope> . handsontable .selected-td { background-color: red; } </style>
it it not work,
iI deleted this scope and the effect came out.like it
<style> . handsontable .selected-td { background-color: red; } </style>

#17

Thank you for continuing the subject.

As it seem that now everything is clear I’m closing the subject.

Feel free to open a new one when needed.

#18