点击按钮后无法更新<td>的innerText问题求助

问题描述 #

我尝试了多种代码实现（包括遍历<tr>等方法），也搜索了大量方案，但始终无法更新id为tableModel的表格内<td>标签的innerText。点击Add按钮后表格毫无变化，已花费近3小时排查仍未解决。

原代码 #

JavaScript 代码

rowM = 1;

function addAccessory() {


  let tableM = document.getElementById("tableModel");

  // Insert data to cells


  var accFrame = "cake"
  var accFoam = "to"
  var accLegBase = "eat"
  var Desc = "yumm"

  var trs = tableM.getElementsByTagName("tr")[rowM - 1];
  var tds = trs.getElementsByTagName("td");
  var tdFrame = trs.getElementsByTagName("td")[8];
  var tdFoam = trs.getElementsByTagName("td")[9];
  var tdLeg = trs.getElementsByTagName("td")[10];
  var tdDesc = trs.getElementsByTagName("td")[5];

  for (var i = 0; i <= tds.length; i++) {
    //tds[i].innerHTML = items[i].style.height;

    if (i == 8) {
      //frame
      tds[i].innerText = accFrame
    } else if (i == 9) {
      //foam
      tds[i].innerText = accFoam
    } else if (i == 10) {
      //Leg/Base
      tds[i].innerText = accLegBase
    } else if (i == 5) {
      tds[i].innerText = Desc
    }
  }
}

HTML 代码

<table class="table table-bordered" id="tableModel">
  <thead>
    <tr>
      <th class="text-left" style="border: 1px solid gray;">No</th>
      <th class="text-left" style="border: 1px solid gray;">Action</th>
      <th class="text-left" style="border: 1px solid gray;">Product Category</th>
      <th class="text-left" style="border: 1px solid gray;">Model</th>
      <th class="text-left" style="border: 1px solid gray;">Code</th>
      <th class="text-left" style="border: 1px solid gray;">Description</th>
      <th class="text-left" style="border: 1px solid gray;">Color</th>
      <th class="text-left" style="border: 1px solid gray;">Accessory</th>
      <th class="text-left" style="border: 1px solid gray;">Frame</th>
      <th class="text-left" style="border: 1px solid gray;">Foam</th>
      <th class="text-left" style="border: 1px solid gray;">Leg/Base</th>
      <th class="text-left" style="border: 1px solid gray;">Total Unit Price</th>
      <th class="text-left" style="border: 1px solid gray;">Qty</th>
      <th class="text-left" style="border: 1px solid gray;">Subtotal</th>
      <th class="text-left" style="border: 1px solid gray;">Remark</th>

    </tr>
  </thead>

  <tbody>

    <tr>
      <td>1</td>
      <td>
        <button class="trashben btn btn-outline-primary" style="border-width: 2px;">
                                <i class="fas fa-pencil"></i>
                            </button>
        <button class="trashben btn btn-outline-danger" style="border-width: 2px;">
                              <i class="fas fa-trash-alt"></i>
                            </button>
        <button type="button" class="btn btn-outline-primary" id="partial-submit">C</button>

      </td>
      <td>Prod Test</td>
      <td>Model Test</td>
      <td>0011</td>
      <td>model testing</td>
      <td>grey</td>
      <td>
        <button class="edit_button" role="button" onclick="addAccessory()"><i class="fa-solid fa-pen-to-square"></i>Add</button></a>
      </td>
      <td>W</td>
      <td>L</td>
      <td>B</td>
      <td>100</td>
      <td>2</td>
      <td>200</td>
      <td>testing</td>
    </tr>


  </tbody>
  </tr>

</table>

错误分析 #

1. 目标行选错：tableM.getElementsByTagName("tr")[rowM - 1] 获取的是整个表格的第一个<tr>（即<thead>里的表头行），而非<tbody>中的数据行，赋值操作不会作用到表格内容区。
2. 循环边界错误：for (var i = 0; i <= tds.length; i++) 会让i循环到等于tds.length的位置，此时tds[i]为undefined，浏览器报错中断代码执行，导致后续赋值失效。
3. 冗余代码干扰：明明已单独获取目标<td>，却通过循环遍历所有<td>判断赋值，既低效又增加出错概率。

修复后的代码 #

方案一：修正索引与循环逻辑

rowM = 1;

function addAccessory() {
  let tableM = document.getElementById("tableModel");
  // 仅获取tbody内的tr，避免选中表头
  var targetRow = tableM.querySelector("tbody tr")[rowM - 1];
  if (!targetRow) return;

  var accFrame = "cake";
  var accFoam = "to";
  var accLegBase = "eat";
  var Desc = "yumm";

  var tds = targetRow.getElementsByTagName("td");
  // 修正循环边界为i < tds.length，避免数组越界
  for (var i = 0; i < tds.length; i++) {
    if (i == 5) {
      tds[i].innerText = Desc;
    } else if (i == 8) {
      tds[i].innerText = accFrame;
    } else if (i == 9) {
      tds[i].innerText = accFoam;
    } else if (i == 10) {
      tds[i].innerText = accLegBase;
    }
  }
}

方案二：直接赋值（简洁高效）

rowM = 1;

function addAccessory() {
  let tableM = document.getElementById("tableModel");
  // 精准选中tbody内的第rowM行数据
  var targetRow = tableM.querySelector(`tbody tr:nth-child(${rowM})`);
  if (!targetRow) return;

  var accFrame = "cake";
  var accFoam = "to";
  var accLegBase = "eat";
  var Desc = "yumm";

  // 直接给对应列的td赋值，可读性更强
  targetRow.getElementsByTagName("td")[5].innerText = Desc;
  targetRow.getElementsByTagName("td")[8].innerText = accFrame;
  targetRow.getElementsByTagName("td")[9].innerText = accFoam;
  targetRow.getElementsByTagName("td")[10].innerText = accLegBase;
}

修复说明 #

• 用querySelector("tbody tr")或tbody tr:nth-child(n)专门选中数据行，彻底避免误选表头。
• 修正循环边界为i < tds.length，防止数组越界报错。
• 去掉冗余循环，直接给目标<td>赋值，代码更简洁高效。
• 增加行存在性判断，避免因找不到行导致的控制台报错。

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