如何将JavaScript返回的数值插入HTML表格的指定单元格

核心问题说明 #

你原先在<td>标签内直接调用JS函数的写法无法生效，因为JS函数的返回值不会自动插入到DOM节点中，需要手动将返回值赋值给对应单元格的内容。

修正后可运行代码 #

HTML 部分 #

<html>
<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    th,
    td {
      padding: 5px;
      text-align: left;
    }
  </style>
</head>
<body>
  <div>
    <input type="button" onClick="insertData()" value="Add">
  </div>
  <div class="custom-select" style="width:200px;">
    <select id="opSelect">
      <option value="0">Select operation:</option>
      <option value="1">operation1</option>
      <option value="2">operation2</option>
    </select>
  </div>
  <br>
  <table id="t1">
    <caption>Operation table</caption>
    <thead>
      <tr>
        <th>Operation code</th>
        <th>To Do</th>
        <th>Done</th>
        <th>Left</th>
      </tr>
    </thead>
    <tbody>
      <!-- 给行加自定义属性标记对应的操作名，方便后续定位 -->
      <tr data-op="operation1">
        <td>operation1</td>
        <td>1000</td>
        <!-- 给需要动态填充的单元格加类标识 -->
        <td class="done-count"></td>
        <td>13</td>
      </tr>
      <tr data-op="operation2">
        <td>operation2</td>
        <td>555</td>
        <td class="done-count"></td>
        <td>15</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

JavaScript 部分 #

// 原获取数值函数，后续可替换为你的HTTP请求逻辑
function get_number_to_pick() {
  var number_to_pick = 50;
  return number_to_pick;
}

// 页面加载完成后自动初始化填充表格
window.onload = function() {
  // 遍历所有Done列的单元格，填充函数返回值
  document.querySelectorAll('.done-count').forEach(cell => {
    cell.textContent = get_number_to_pick();
  })
}

// 通用更新指定单元格的函数，后续拿到HTTP请求返回值、WebSocket推送数据时可直接调用
// 参数说明：op为操作名（如operation1）、col为要更新的列（可选值todo/done/left）、value为要更新的数值
function updateTableCell(op, col, value) {
  const targetRow = document.querySelector(`tr[data-op="${op}"]`);
  if (!targetRow) return;
  // 匹配列对应的下标
  const colIndexMap = {
    todo: 1,
    done: 2,
    left: 3
  };
  if (!colIndexMap.hasOwnProperty(col)) return;
  targetRow.cells[colIndexMap[col]].textContent = value;
}

// 调用示例：更新operation1的Done列为88，直接执行下面代码即可
// updateTableCell('operation1', 'done', 88)

异步请求适配说明 #

如果后续get_number_to_pick要改为发起HTTP请求，因为请求是异步操作，需要用async/await处理，示例写法：

async function get_number_to_pick(op) {
  const response = await fetch(`你的接口地址?operation=${op}`);
  const result = await response.json();
  return result.number;
}

// 初始化填充逻辑对应修改为异步
window.onload = async function() {
  const allRows = document.querySelectorAll('tr[data-op]');
  for (const row of allRows) {
    const opName = row.dataset.op;
    const num = await get_number_to_pick(opName);
    row.querySelector('.done-count').textContent = num;
  }
}

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