将数组中的项目添加到 HTML 表答案

【问题标题】：Add Items from Array to HTML table将数组中的项目添加到 HTML 表
【发布时间】：2021-11-17 22:32:25
【问题描述】：

如何在 JavaScript 中遍历数组，同时使用按钮将每个元素添加到 HTML 表中？（即点击一个按钮，“Rigatoni”就会添加到表格中。）

function New_Item() {

  const Ingredients = ["Rigatoni", "Pesto", "Crushed Tomatoes", "Pasta Water", "Mozzarella Cheese", "Fresh Chopped Basil"]
  for (var x = 0; x < Ingredients.length; x++)
    var table = document.getElementById("myTable");
  var row = table.insertRow(1);
  var cell1 = row.insertCell(0);
  cell1.innerHTML = Ingredients;
}

<table id="myTable">
  <header>
    <tr>
      <td>Ingredient</td>
    </tr>
  </header>
  <footer>
  </footer>
</table>
<button type="button" onclick="New_Item()">Add Ingredient</button>

【问题讨论】：

在for 循环中应该出现的所有内容都使用方括号。目前，只有for 语句下的第一行出现在循环中。我建议在深入学习之前先学习一些基本的 JavaScript 教程。
如果您能提供某种 UI 设计将会很有帮助

标签： javascript html arrays for-loop

【解决方案1】：

如果我理解你的问题，这就是我的解决方案。

编辑：我添加了带有循环而不是按钮的代码，您可以删除按钮标签。

<script>
var current=0;
const Ingredients = ["Rigatoni", "Pesto", "Crushed Tomatoes", "Pasta Water", "Mozzarella Cheese", "Fresh Chopped Basil"];
function New_Item() {
  if (current < Ingredients.length) {
  var table = document.getElementById("myTable");
  var row = table.insertRow(current+1);
  var cell1 = row.insertCell(0);
  cell1.innerHTML = Ingredients[current];
    current++;
  }
}

/* Second version with loop */

window.onload = function(e) {
  Ingredients.forEach(function(item, index, array) {
    New_Item_with_loop(index);
  });
}
function New_Item_with_loop(index) {
   var table = document.getElementById("myTable");
   var row = table.insertRow(index+1);
   var cell1 = row.insertCell(0);
   cell1.innerHTML = Ingredients[index];
}
</script>
<table id="myTable">
  <header>
    <tr>
      <td>Ingredient</td>
    </tr>
  </header>
  <footer>
  </footer>
</table>
<button type="button" onclick="New_Item()">Add Ingredient</button>

【讨论】：

这正是我所需要的！谢谢你。我唯一需要注意的是，我需要在 For 或 While 循环中使用它。你能修改它让它这样工作吗？
我编辑最后一条评论

【解决方案2】：

您可以使用下面的代码。

<table id="myTable">
<header>
    <tr>
    <td>Ingredient</td>
    </tr>
</header>
<tbody>
    
</tbody>
</table>
<button type="button" onclick="New_Item()">Add Ingredient</button>

<script>
const Ingredients = ["Rigatoni", "Pesto", "Crushed Tomatoes", "Pasta Water", "Mozzarella Cheese", "Fresh Chopped Basil"];

function New_Item() {
  var tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0];

  Ingredients.forEach(function(cellData) {
    var row = document.createElement('tr');

    var cell = document.createElement('td');
    cell.appendChild(document.createTextNode(cellData));
    row.appendChild(cell);

    tableBody.appendChild(row);
  });
}
</script>

【讨论】：