Question

我在互联网上研究过这个问题，但我找不到答案。

我想改变特定双手细胞的背景颜色。请注意，我并不是指在创建手指对象时设置颜色，我也不是指在更改表格中的值后设置颜色。

理想情况下，我可以做类似的事情:(下面的伪代码）

function setColour(row,col,colour){
  hot.cells(row,col).backgroundColour=colour
 }

function makeItRed(){
  setColour(0,4,"#FF0000") //this sets the cell in the 1st row and 5th column to red
}

有办法吗？

编辑：

对于问题的嫌疑，请假设makeItRed()函数调用将分配给按钮。

EDIT2： Stackoverflow不允许将技术名称放在问题标题中，它是关于HANDSONTABLE而不是HTML表格。

Answer 1

您可以使用:nth-child()选择器执行此操作：

https://repl.it/@ryanpcmcquen/PricklyJumboBlackbear

document.addEventListener('DOMContentLoaded', () => {
    const setColour = (row, col, colour) => {
        const cell = document.querySelector(`table tr:nth-child(${row + 1}) td:nth-child(${col + 1})`);
        cell.style.backgroundColor = colour;
    };
    
    const makeItRed = () => {
        setColour(0, 2, "#FF0000");
    };
    
    document.querySelector('.color-me').addEventListener('click', () => {
        makeItRed();
    });
});

table, table tr, table td {
    border-style: solid;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
      <table>
          <tr>
              <td>0, 0</td>
              <td>0, 1</td>
              <td>0, 2</td>
          </tr>
          <tr>
              <td>1, 0</td>
              <td>1, 1</td>
              <td>1, 2</td>
          </tr>
      </table>
      <br />
      <button class="color-me">Color me</button>
    <script src="index.js"></script>
  </body>
</html>

您必须将row和col变量增加1，因为:nth-child()不是基于零的。

Answer 2

Handsontable允许您设置custom renderer，为背景着色：

const bgRenderer = function(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.backgroundColor = '#cbd9e4';
};

function makeItRed() {
    hot.getCellMeta(0,0).renderer = bgRenderer;
    hot.render();
};

如果你使用其他渲染器（如Handsontable.renderers.DateRenderer），你也需要覆盖它们。

完整示例here。

BTW，@ ryanpcmcquen的着色方式可行，但背景不会粘 - 看同样的小问题。

如何以编程方式更改单元格的背景颜色？（不是改变，不取决于价值，不取决于创造）

2 个答案:

如何以编程方式更改单元格的背景颜色？ （不是改变，不取决于价值，不取决于创造）

2 个答案:

如何以编程方式更改单元格的背景颜色？（不是改变，不取决于价值，不取决于创造）