如何在TypeScript中通过参数修改表格单元格的背景颜色

问题背景 #

给定如下HTML结构：

<div class="DGClass">
  <div>
    <div>
      <table>
        <tr>
          <td>aasf</td>
          <td>asf</td>
          <td>asdf</td>
        </tr>
        <tr>
          <td>asdf</td>
          <td>asdf</td>
          <td>asf</td>
        </tr>
        <tr>
          <td>asdf</td>
          <td>asdf</td>
          <td>asf</td>
        </tr>
      </table>
    </div>
  </div>
</div>

原CSS通过固定选择器设置第二行第二列单元格背景为红色：

.DGClass  *  tr:nth-child(2) > td:nth-child(2)   {
    background-color: red !important ;
}

需求是通过TypeScript接收行号、列号、颜色值参数，动态修改指定单元格的背景色。

实现方案 #

1. 原生DOM操作（无框架场景） #

直接通过DOM选择器定位目标单元格，修改其行内样式。注意nth-child是从1开始计数，参数可选择1-based或0-base格式：

1-based参数版本（与CSS选择器逻辑一致）

function setCellBg(rowIndex: number, colIndex: number, color: string): void {
  const cell = document.querySelector(`.DGClass tr:nth-child(${rowIndex}) > td:nth-child(${colIndex})`);
  if (cell) {
    // 覆盖原CSS的!important优先级
    (cell as HTMLElement).style.setProperty('background-color', color, 'important');
  }
}

// 调用示例：将第2行第2列改为蓝色
setCellBg(2, 2, 'blue');

0-based参数版本（适配数组索引逻辑）

function setCellBgZeroBased(row: number, col: number, color: string): void {
  const cell = document.querySelector(`.DGClass tr:nth-child(${row + 1}) > td:nth-child(${col + 1})`);
  if (cell) {
    // 无需覆盖!important时可直接赋值
    (cell as HTMLElement).style.backgroundColor = color;
    // 需覆盖!important则用下面一行
    // (cell as HTMLElement).style.setProperty('background-color', color, 'important');
  }
}

2. React框架场景（组件化实现） #

如果是React项目，通过状态管理动态控制样式更符合组件化思路：

import { useState } from 'react';

const TableComponent = () => {
  // 存储高亮单元格的配置信息
  const [highlightedCell, setHighlightedCell] = useState<{row: number, col: number, color: string} | null>(null);

  // 动态设置高亮的方法
  const setCellHighlight = (row: number, col: number, color: string) => {
    setHighlightedCell({row, col, color});
  };

  const tableData = [
    ['aasf', 'asf', 'asdf'],
    ['asdf', 'asdf', 'asf'],
    ['asdf', 'asdf', 'asf'],
  ];

  return (
    <div className="DGClass">
      <div>
        <div>
          <table>
            {tableData.map((row, rowIdx) => (
              <tr key={rowIdx}>
                {row.map((cellText, colIdx) => {
                  const isTarget = highlightedCell?.row === rowIdx + 1 && highlightedCell?.col === colIdx + 1;
                  return (
                    <td 
                      key={colIdx}
                      style={isTarget ? {backgroundColor: highlightedCell?.color} : {}}
                    >
                      {cellText}
                    </td>
                  );
                })}
              </tr>
            ))}
          </table>
        </div>
      </div>
      {/* 测试按钮：点击设置第2行第2列为绿色 */}
      <button onClick={() => setCellHighlight(2, 2, 'green')}>设置指定单元格颜色</button>
    </div>
  );
};

export default TableComponent;

3. 通用注意事项 #

• 确保DOM加载完成后再执行操作：可将代码放在DOMContentLoaded事件回调中，或框架的生命周期钩子（如React的useEffect）里。
• 若原CSS使用了!important，必须通过style.setProperty指定优先级才能覆盖。
• 可扩展函数参数，加入容器类名，适配不同结构的表格场景。

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