时间戳

首页 > 解决方案 > 将数组中的项目添加到 HTML 表

javascript - 将数组中的项目添加到 HTML 表

问题描述

如何在使用按钮将每个元素添加到 HTML 表中时遍历 JavaScript 中的数组？（即单击一个按钮，“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>

标签： javascripthtmlarraysfor-loop

解决方案

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

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

<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>

推荐阅读