如何创建JS函数为表格指定单元格添加高亮颜色？

看来你遇到的问题是错误地使用了DOM元素的属性访问方式——表格元素并没有.tr属性，行元素也没有.td属性，这就是代码报错的核心原因。

错误原因拆解 #

你写的这行代码：

var change = document.getElementById("table").tr[rowIndex].td[cellIndex];

存在两个关键问题：

1. 获取表格行应该用table.rows（这是表格元素自带的HTMLCollection，包含所有<tr>元素），而不是.tr；
2. 获取行内的单元格应该用row.cells（行元素自带的HTMLCollection，包含该行所有<td>/<th>元素），而不是.td。

修正后的高亮函数 #

结合你动态生成表格的场景，我给你整理了完整的可运行代码，包含错误判断和高亮逻辑：

// 补全你提供的表格生成函数（确保表格id正确）
function GenerateTable() {
  const table = document.createElement("table");
  table.id = "table"; // 必须确保表格有这个id，否则getElementById找不到
  const tblBody = document.createElement("tbody");
  const rowCount = parseInt(document.getElementById("irow").value); // 假设irow是输入框id
  const colCount = parseInt(document.getElementById("icol").value); // 假设icol是输入框id

  for (var i = 0; i < rowCount; i++) {
    const row = document.createElement("tr");
    for (var j = 0; j < colCount; j++) {
      const cell = document.createElement("td");
      cell.textContent = `行${i+1}列${j+1}`; // 填充单元格内容
      row.appendChild(cell);
    }
    tblBody.appendChild(row);
  }
  table.appendChild(tblBody);
  document.body.appendChild(table); // 把表格添加到页面中
}

// 高亮指定(x,y)单元格的函数（x是行索引，y是列索引，从0开始）
function highlightCell(rowIndex, cellIndex, highlightColor = "#ffeb3b") {
  // 1. 获取表格元素
  const table = document.getElementById("table");
  if (!table) {
    console.error("页面中不存在id为'table'的表格，请检查生成逻辑");
    return;
  }

  // 2. 获取目标行
  const targetRow = table.rows[rowIndex];
  if (!targetRow) {
    console.error(`不存在索引为${rowIndex}的行，当前表格共有${table.rows.length}行`);
    return;
  }

  // 3. 获取目标单元格
  const targetCell = targetRow.cells[cellIndex];
  if (!targetCell) {
    console.error(`第${rowIndex}行不存在索引为${cellIndex}的单元格，该行共有${targetRow.cells.length}列`);
    return;
  }

  // 4. 应用高亮样式
  targetCell.style.backgroundColor = highlightColor;
}

使用说明 #

1. 如果你输入的x、y是从1开始的序号（比如用户输入第2行第3列），调用时需要先转换为索引：

   // 假设用户输入的行号是inputRow，列号是inputCol
   highlightCell(inputRow - 1, inputCol - 1);
   

2. 如果需要清除之前的高亮，可以在函数开头添加一段重置逻辑：

   // 重置所有单元格背景色
   Array.from(table.rows).forEach(row => {
     Array.from(row.cells).forEach(cell => {
       cell.style.backgroundColor = "";
     });
   });
   

这样修改后，就能正确选中目标单元格并高亮了。

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