C# Winform中如何实现矩阵单元格颜色填充及点击交互？

1. 创建所需矩阵 #

你可以用二维数组存储矩阵的行列数据，再动态生成DOM节点渲染到页面即可，以下是示例代码：

// 配置矩阵行列数，可按需调整数值
const ROW_COUNT = 6;
const COL_COUNT = 6;
const matrixContainer = document.getElementById('matrix-container');

// 生成矩阵DOM
function createMatrix() {
  for (let i = 0; i < ROW_COUNT; i++) {
    const rowDom = document.createElement('div');
    rowDom.className = 'matrix-row';
    for (let j = 0; j < COL_COUNT; j++) {
      const cellDom = document.createElement('div');
      cellDom.className = 'matrix-cell';
      // 可存储行列标识方便后续扩展操作
      cellDom.dataset.row = i;
      cellDom.dataset.col = j;
      rowDom.appendChild(cellDom);
    }
    matrixContainer.appendChild(rowDom);
  }
}

配套基础样式可自行调整，控制单元格宽高、边距、边框即可。

2. 监听单元格点击事件 #

推荐用事件委托的方式绑定点击事件，不需要给每个单元格单独绑定，矩阵规模大的时候性能表现更好：

matrixContainer.addEventListener('click', function(e) {
  // 校验点击目标为矩阵单元格
  if (e.target.classList.contains('matrix-cell')) {
    // 触发全量填充逻辑
    fillAllCells();
  }
})

如果你的矩阵规模很小，也可以在生成单元格的环节直接给每个cellDom绑定click事件，执行逻辑完全一致。

3. 复用已有单单元格填充代码 #

你已经写好的单单元格填充逻辑不需要做任何修改，只要把它封装成接收单元格DOM作为入参的函数即可，比如你原来的函数命名为fillSingleCell(cell)，新增一个批量填充的函数遍历所有单元格调用它就行：

// 你已有的单单元格4色填充代码，无需调整内部逻辑
function fillSingleCell(cell) {
  // 此处保留你原来的填充逻辑
}

// 新增批量填充逻辑，直接复用原有函数
function fillAllCells() {
  const allCells = document.querySelectorAll('.matrix-cell');
  allCells.forEach(cell => {
    fillSingleCell(cell);
  })
}

内容的提问来源于stack exchange，提问作者REX LIN