如何将Prompt获取的用户输入填充至HTML表格指定单元格？

我来帮你搞定把用户输入填入表格的问题！你已经完成了获取用户输入的核心部分，接下来只需要把这些值精准放到表格对应的单元格里就行，我给你两种实用的实现方式：

方法一：给单元格添加ID（推荐，直观易维护） #

首先完善你的HTML表格结构，给每个需要填充数据的单元格设置唯一ID：

<table id="myTable" border="1">
  <tr>
    <th>Trip Location</th>
    <td id="tripCell"></td> <!-- 对应行程地点的单元格 -->
  </tr>
  <tr>
    <th>Miles Driven</th>
    <td id="milesCell"></td> <!-- 对应行驶里程的单元格 -->
  </tr>
  <tr>
    <th>Gallons of Gas Used</th>
    <td id="gallonsCell"></td> <!-- 对应油耗的单元格 -->
  </tr>
  <tr>
    <th>MPG (Miles Per Gallon)</th>
    <td id="mpgCell"></td> <!-- 对应油耗效率的单元格 -->
  </tr>
</table>

然后修改你的JavaScript代码，计算MPG并将数据填入对应单元格：

// 确保DOM加载完成后执行代码，避免找不到表格元素
document.addEventListener('DOMContentLoaded', function() {
  var trip; 
  var miles; 
  var gallons; 
  var mpg; 

  // 获取用户输入
  trip = prompt("Enter your trip location"); // 行程地点是文本，无需转数字
  miles = parseFloat(prompt("Enter miles driven"));
  gallons = parseFloat(prompt("Enter gallons of gas used"));

  // 计算MPG，处理除数为0的异常情况
  if (gallons > 0) {
    mpg = miles / gallons;
  } else {
    mpg = "Invalid (Gallons can't be 0)";
  }

  // 将数据填入表格单元格
  document.getElementById('tripCell').textContent = trip;
  document.getElementById('milesCell').textContent = miles.toFixed(1); // 保留1位小数更友好
  document.getElementById('gallonsCell').textContent = gallons.toFixed(1);
  // 有效数值保留两位小数，异常情况直接显示提示
  document.getElementById('mpgCell').textContent = typeof mpg === 'number' ? mpg.toFixed(2) : mpg;
});

方法二：通过表格行列索引获取单元格（无需修改太多HTML） #

如果不想给单元格加ID，也可以直接通过表格的行、列索引定位单元格（注意索引从0开始）：

假设你的表格结构是这样的：

<table id="myTable" border="1">
  <tr>
    <td>Trip Name</td>
    <td></td> <!-- 第0行第1列：填行程地点 -->
  </tr>
  <tr>
    <td>Miles Driven</td>
    <td></td> <!-- 第1行第1列：填行驶里程 -->
  </tr>
  <tr>
    <td>Gallons Used</td>
    <td></td> <!-- 第2行第1列：填油耗 -->
  </tr>
  <tr>
    <td>MPG</td>
    <td></td> <!-- 第3行第1列：填MPG -->
  </tr>
</table>

对应的JavaScript代码：

document.addEventListener('DOMContentLoaded', function() {
  var trip; 
  var miles; 
  var gallons; 
  var mpg; 

  trip = prompt("Enter your trip location");
  miles = parseFloat(prompt("Enter miles driven"));
  gallons = parseFloat(prompt("Enter gallons of gas used"));

  // 计算MPG
  if (gallons > 0) {
    mpg = miles / gallons;
  } else {
    mpg = "Invalid";
  }

  // 获取表格对象
  var table = document.getElementById('myTable');
  
  // 通过行列索引填充数据
  table.rows[0].cells[1].textContent = trip;
  table.rows[1].cells[1].textContent = miles.toFixed(1);
  table.rows[2].cells[1].textContent = gallons.toFixed(1);
  table.rows[3].cells[1].textContent = typeof mpg === 'number' ? mpg.toFixed(2) : mpg;
});

关键注意点： #

• 记得把JavaScript代码放在<body>标签末尾，或者用DOMContentLoaded事件包裹，否则页面还没加载完表格，JS会找不到元素。
• 行程地点是文本内容，不需要用parseFloat转换，直接保留用户输入的字符串即可。
• 加入了除数为0的判断，避免出现Infinity或NaN的异常显示。

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