How I can iterate through an array in JavaScript while adding each element to an HTML table with a button? (i.e. click a button and "Rigatoni" gets added to a table.)
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>If I understand what you asked, this is my solution.
Edit: I added code with loop instead of button, you can remove button tag.
<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>You can use the code below.
<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>