如何缩短JavaScript中showNo()函数的冗余代码？

你的showNo()函数存在大量重复DOM查询和赋值代码，完全可以通过循环遍历的方式大幅精简，同时还能修正原逻辑的问题（原代码每次都给第一行单元格赋值，而不是刚新增的行）。

修改后的完整JavaScript代码 #

const btn1 = document.getElementById('btn1');
const tab = document.getElementById("tab");

btn1.addEventListener('click', () => {
  newCells();
  showNo();
});

function newCells() {
  let row = tab.insertRow(-1);

  for (var i = 0; i <= 15; i++) {
    let c = row.insertCell(i);
    c.id = `R${row.rowIndex}C${++c.cellIndex}`;
  }
}

function showNo() {
  // 获取表格最后一行（刚新增的那一行）
  const latestRow = tab.rows[tab.rows.length - 1];
  // 循环处理16个输入框和对应单元格
  for (let i = 1; i <= 16; i++) {
    const inputVal = document.getElementById(`inp${i}`).value;
    // cells索引从0开始，所以用i-1对应位置
    latestRow.cells[i - 1].textContent = inputVal || '';
  }
}

简化思路 #

1. 利用循环消除重复：输入框ID是inp1到inp16，单元格在新增行里的位置是0到15，通过循环遍历1到16的数字，动态拼接ID并匹配单元格位置，避免重复写16次相同逻辑。
2. 直接操作最新行：通过tab.rows[tab.rows.length - 1]获取刚新增的行，不用通过ID查找单元格，代码更简洁高效。
3. 使用textContent代替innerHTML：纯文本赋值用textContent更安全，避免潜在的XSS风险。

如果坚持要通过ID查找单元格（比如兼容旧逻辑），也可以用循环拼接单元格ID：

function showNo() {
  const rowNum = tab.rows.length; // 最新行的行号
  for (let i = 1; i <= 16; i++) {
    const inputVal = document.getElementById(`inp${i}`).value;
    document.getElementById(`R${rowNum}C${i}`).textContent = inputVal || '';
  }
}

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