Блог

Главная - Вопросы по программированию - Добавление элементов из массива в таблицу HTML

Добавление элементов из массива в таблицу HTML

#javascript #html #arrays #for-loop

Вопрос:

Как я могу перебирать массив в JavaScript, добавляя каждый элемент в таблицу HTML с помощью кнопки? (т. е. нажмите кнопку, и «Ригатони» будет добавлен в таблицу.)

 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>

Комментарии:

1. Используйте скобки вокруг всего, что должно происходить в for цикле. В настоящее время в цикле встречается только первая строка под for оператором. Я предлагаю пройти несколько базовых уроков по JavaScript, прежде чем идти дальше.

2. Будет полезно, если вы сможете предоставить какой-то дизайн пользовательского интерфейса

Ответ №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>

Комментарии:

1. Это именно то, что мне нужно! Спасибо. Единственное предостережение, которое у меня есть, заключается в том, что мне нужно использовать это в цикле » Для » или «Пока». Можете ли вы изменить его, чтобы он работал именно так?

2. Я редактирую последний комментарий

Ответ №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>
Метки: