¿Cómo puedo iterar a través de una matriz en JavaScript mientras agrego cada elemento a una tabla HTML con un botón? (es decir, haga clic en un botón y "Rigatoni" se agregará a una tabla).
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>Si entiendo lo que preguntas, esta es mi solución.
Editar: agregué código con bucle en lugar de botón, puede eliminar la etiqueta del botón.
<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>Puedes usar el código de abajo.
<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>