JavaScript开发：点击按钮为近质数表格单元格设置黄色背景

原代码存在的核心问题 #

1. 表格列数错误：j <= 100会生成101列，且编号从0开始，不符合题目要求的100×100、编号从1递增的规则
2. 近质数判断逻辑错误：contador初始化位置不对，会累积不同数字的因数计数；因数遍历效率极低，无需遍历到数字本身
3. 无法定位目标单元格：仅计算数字但未关联对应的<td>元素，无法修改背景色
4. 缺少功能触发按钮：未添加“计算近质数”按钮，无法触发背景色修改逻辑

优化方案与修复步骤 #

1. 修正表格生成逻辑：将列循环改为j从1到100，编号计算为i*100 + j，确保生成100×100表格且编号从1到10000
2. 添加功能触发按钮：在页面中创建按钮并绑定点击事件，触发近质数判断逻辑
3. 优化近质数判断：
   • 将contador移至每个数字的因数判断循环前初始化，避免计数污染
   • 因数遍历仅需到Math.sqrt(num)，因为若数字有大于平方根的因数，必然存在对应的小于平方根的因数，大幅减少循环次数
4. 关联单元格与数字：生成<td>时添加data-num属性存储对应编号，后续可通过该属性快速定位目标单元格

完整优化代码 #

window.addEventListener("DOMContentLoaded", main);

function main() {
  const body = document.body;
  const tabla = document.createElement("table");
  const tblBody = document.createElement("tbody");

  // 生成100×100表格，编号从1开始
  for (let i = 0; i < 100; i++) {
    const fila = document.createElement("tr");
    // j从1到100，确保每行列数为100，编号从1开始
    for (let j = 1; j <= 100; j++) {
      const columna = document.createElement("td");
      const num = i * 100 + j;
      columna.textContent = num;
      // 添加data-num属性，用于后续定位单元格
      columna.dataset.num = num;
      fila.appendChild(columna);
    }
    tblBody.appendChild(fila);
  }

  tabla.appendChild(tblBody);
  body.appendChild(tabla);
  tabla.setAttribute("border", "2");

  // 创建并添加"计算近质数"按钮
  const btn = document.createElement("button");
  btn.textContent = "计算近质数";
  btn.addEventListener("click", casiprimos);
  body.appendChild(btn);
}

function casiprimos() {
  // 遍历1到10000的所有数字
  for (let num = 1; num <= 10000; num++) {
    let contador = 0;
    // 优化因数遍历范围到平方根
    for (let z = 1; z <= Math.sqrt(num); z++) {
      if (num % z === 0) {
        // 若z是因数，且z不等于num/z，则计数+2；否则+1
        if (z === num / z) {
          contador++;
        } else {
          contador += 2;
        }
      }
      // 提前终止：如果因数数量超过3，无需继续遍历
      if (contador > 3) break;
    }
    // 根据题目定义，因数个数为3的是近质数
    if (contador === 3) {
      const cell = document.querySelector(`td[data-num="${num}"]`);
      if (cell) {
        cell.style.backgroundColor = "yellow";
      }
    }
  }
}

额外说明 #

• 用const/let替代var，避免变量提升和全局作用域污染
• 因数遍历添加提前终止逻辑：当因数数量超过3时直接跳出循环，进一步提升效率
• 通过dataset.num关联数字与单元格，比通过坐标计算定位更直观可靠

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