我试图添加一个用户提示添加到我有的表，但我无法弄明白

Question

我试图将其发送到用户被问到将输入到桌子上的单元格的问题的位置。

我需要让用户输入问题的答案，而且我已经看了一遍，似乎无法找到方法。

＆＃13;

＆＃13;

var trip;
var miles;
var gallons;
var mpg;

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

＆＃13;

<table id="myTable">
  <tr>
    <td> |Trip Name|</td>
    <td> |Miles Driven| </td>
    <td> |Gallons Used| </td>
    <td> |MPG| </td>
  </tr>
  <tr>
    <td>Row 2 cell1 </td>
    <td>Row2 cell2</td>
    <td>Row2 cell3</td>
    <td>Row2 cell4</td>
  </tr>

  <tr>
    <td>Row3 cell1</td>
    <td>Row3 cell2</td>
    <td>Row3 cell3</td>
    <td>Row3 cell4</td>
  </tr>
  <tr>
    <td>Row4 cell1</td>
    <td>Row4 cell2</td>
    <td>Row4 cell3</td>
    <td>Row4 cell4</td>
  </tr>
  <tr>
    <td>Row5 cell1</td>
    <td>Row5 cell2</td>
    <td>Row5 cell3</td>
    <td>Row5 cell4</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

简答

保存变量中提示的答案不会使其出现在文档中。为此，您必须选择要显示的单元格并设置其textContent属性，如下所示：

var cell = document.querySelector("selector-of-the-cell");
cell.textContent = prompt("...");

长答案

在您当前的JavaScript代码中，您反复使用相同的代码重复执行同样的操作。随着您的应用程序扩展，事情会变得混乱。

我建议的替代方法是使用data-*属性，例如data-question，并将每个问题保存到它所关注的列标题中。这样，为了使代码按需工作，您只需要：

• 获取标题（又名第一行的单元格）和第二行的单元格。
• 遍历标题并在prompt内使用每个人的问题。
• 将结果保存在标题下的单元格的textContent。

您可以在以下工作代码段中看到上述建议。

<强>段：

/* ----- JavaScript ----- */

/* Get all column titles. */
var titles = document.querySelectorAll("#myTable th");
var cells = document.querySelectorAll("#myTable td");

/* Iterate over every title. */
[].forEach.call(titles, function(title, index) {
  /* Get the question associated with the title. */
  var question = title.dataset.question;
  
  /* Parse and save the result of the question in the cell under the title. */
  cells[index].textContent = prompt(question);
});

/* ----- CSS ----- */
#myTable {
  border-collapse: collapse;
}

#myTable tr>* {
  padding: .5em;
  border: 1px solid #ccc;
}

<!---- HTML ----->
<table id="myTable">
  <thead>
    <th data-question="Enter your trip location">Trip Name</th>
    <th data-question="Enter miles driven">Miles Driven</th>
    <th data-question="Enter gallons of gas used">Gallons Used</th>
    <th data-question="Enter your speed">MPG</th>
  </thead>

  <tbody>
    <tr>
      <td>Row1 cell1</td>
      <td>Row1 cell2</td>
      <td>Row1 cell3</td>
      <td>Row1 cell4</td>
    </tr>
  </tbody>
</table>