javascript - How to set the background colour of every cell in a HandsOnTable? - Stack Overflow

admin管理员组

文章数量:1388116

I have a HandsOnTable table and would like to set the background colour of every cell, without providing a renderer function or the like. I tried copying the process that their Science demo uses but my table has formatting on the values and that gets lost with their renderer function code.

My version of the renderer:

var footerRenderer = function(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.backgroundColor = '#EEE';
    td.style.textAlign = 'right';
}

To clarify: The problem here is that using a renderer function with HandsOnTable appear to wipe out formatting which has been applied by the properties of the table, when something simple like changing the background colour of a cell is required.

I have a HandsOnTable table and would like to set the background colour of every cell, without providing a renderer function or the like. I tried copying the process that their Science demo uses but my table has formatting on the values and that gets lost with their renderer function code.

My version of the renderer:

var footerRenderer = function(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.backgroundColor = '#EEE';
    td.style.textAlign = 'right';
}

To clarify: The problem here is that using a renderer function with HandsOnTable appear to wipe out formatting which has been applied by the properties of the table, when something simple like changing the background colour of a cell is required.

• javascript
• css
• handsontable

Share Improve this question Follow edited Feb 20, 2017 at 17:18 Matt W asked Feb 20, 2017 at 17:11 Matt WMatt W 12.5k2929 gold badges140140 silver badges240240 bronze badges 3

• possible to use vanilla js? – user4602228 Commented Feb 20, 2017 at 17:20
• Not sure how to identify the one particular element I'm looking for. – Matt W Commented Feb 20, 2017 at 17:23
• Also, this does not appear to be documented: Handsontable.renderers.TextRenderer.apply – Matt W Commented Feb 20, 2017 at 17:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

There are a variety of ways to acplish this. However, the cells function is probably the best.

Option 1

Step 1: Set up your handsontable:

var container = document.getElementById('Element_ID');
hot = new Handsontable(container, {
  data: <yourdataArray>,
  autoRowSize:false,
  autoWrapRow:true,
  autoRowSize: false
});

Step 2: Update the handsontable settings using the cells function. The cells function will go through each row and cell in the table

 // update spreadsheet setting
 hot.updateSettings({
     cells: function (row, col, prop) {                        
          var cell = hot.getCell(row,col);   // get the cell for the row and column                                                                                                                
          cell.style.backgroundColor = "#EEE";  // set the background color
     }
 });

Option 2

I remend the cells function over this, but this does demonstrate other ways of doing the same thing.

var hot = new Handsontable(document.getElementById('example1'), options);
var rows=hot.countRows();  // get the count of the rows in the table
var cols=hot.countCols();  // get the count of the columns in the table.
for(var row=0; row<rows; row++){  // go through each row of the table
    for(var col=0; col<cols; col++){  // go through each column of the row
        var cell = hot.getCell(row,col);  
        cell.style.background = "#00FF90";
    }
}
hot.render();  // ensure the table is refreshed.  

本文标签： javascriptHow to set the background colour of every cell in a HandsOnTableStack Overflow