Записать массив числовых значений в таблицу состоящую из инпутов

210
27 ноября 2021, 20:50

Помогите решить такую задачу. Имеется массив, состоящий из 9 числовых значений например: var readyArray = [1, 0, 4, 2, 0, 1, 6, 2, 0]; Нужно записать данный массив в таблицу, состоящую из инпутов, таблица имеет определенное количество срок и столбцов, а именно 3 столбца и 3 строки (3x3):

Я новенький в этом, получается нужно проходить циклом по строкам, а потом по столбцам? Помогите пожалуйста, может есть примеры или просто направьте меня в нужную строну.

Answer 1

var readyArray = [1, 0, 4, 2, 0, 1, 6, 2, 0]; 
var html = ""; 
var index = 0; 
for (var i = 0; i < 3; i++) { 
  for (var j = 0; j < 3; j++) { 
    html += `<input type="text" value="${readyArray[index++]}"/>`; 
  } 
  html += "<br/>"; 
} 
document.getElementById("container").innerHTML = html;
#container input { 
  width: 50px; 
  margin: 1px; 
}
<div id="container"></div>

Answer 2

Это если фиксированное количество инпутов

const inputs = [...document.querySelectorAll(".input__table input")]; 
var readyArray = [1, 0, 4, 2, 0, 1, 6, 2, 0]; 
 
inputs.forEach((input, index) => { 
  input.value = readyArray[index] 
})
.input__table{ 
  display: flex; 
  flex-wrap: wrap; 
  max-width: 320px; 
} 
.input__table input{ 
  width: 100px; 
  height: 40px; 
   
}
<div class="input__table"> 
  <input type="text" value=""> 
  <input type="text" value=""> 
  <input type="text" value=""> 
  <input type="text" value=""> 
  <input type="text" value=""> 
  <input type="text" value=""> 
  <input type="text" value=""> 
  <input type="text" value=""> 
  <input type="text" value=""> 
</div>

READ ALSO
Почему криво работает Slick Slider?

Почему криво работает Slick Slider?

Всем добрейшего дня! Подскажите, гуру, есть слайдер на Slick Slider'еЕсть некоторые огрехи в работе данного слайдера с превью фотографий

105
Как проходит сравнение объектов в mapStateToProps?

Как проходит сравнение объектов в mapStateToProps?

Подскажите пожалуйста, как проходит сравнение объектов в mapStateToProps для определения того, нужно ли перерендерить компонентИнтересует вот...

109
Правильное ли решение этой задании таким образом?

Правильное ли решение этой задании таким образом?

Создайте функцию конструктор Calculator, которая создаёт «расширяемые» объекты калькулятораРеализуйте метод calculate(str), который принимает строку...

191