Создать динамическую таблицу html с помощью javascript из простого массива

Я хочу написать немного JavaScript для создания простой таблицы HTML из массива, который содержит только числа:

var array = [1,2,3,4,5,6,7,8,9,10];

Таблица должна выглядеть так:

1 2 3 4 5
6 7 8 9 10

Но код JavaScript должен быть динамическим в зависимости от размера массивов (хотя всегда с коэффициентом 5).

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

Это одна из моих попыток.

var tableStart = "<table border>";
for (i = 0; i < arraySize/5; i++){
  var tableMiddle = "<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>"
  if (arraySize/5 >= 2) {
    tableMiddle = tableMiddle + tableMiddle;
  }
};
var tableEnd = "</table>";
var table = tableStart.concat(tableMiddle, tableEnd);

также как и

var result = "<table border=1>";
for(var i=0; i<2; i++) {
    result += "<tr>";
    for(var j=0; j<array.length; j++){
        result += "<td>"+array[i]+"</td>";
    }
    result += "</tr>";
}
result += "</table>";

это просто приводит к тому, что два значения массива отображаются много раз.

Привет @Alexander - добро пожаловать в SO. Можете ли вы показать код, который вы пробовали до сих пор?

— 01.05.2018 11:17

@itamar конечно

— 01.05.2018 11:25

javascript html css arrays html-table

01.05.2018 11:16

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

14 688

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы можете перебрать массив и построить новую строку, если остаток с 5 равен нулю.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    tr;

array.forEach((v, i) => {
    var td = document.createElement('td');
    
    if (!(i % 5)) {
        tr = document.createElement('tr');
        document.getElementById('table0').appendChild(tr);
    }
    td.appendChild(document.createTextNode(v));
    tr.appendChild(td);
});

<table id = "table0"></table>

01.05.2018 11:29

var array = [1,2,3,4,5,6,7,8,9,10];

var result = "<table border=1>";
result += "<tr>";
for (var j = 0; j < array.length; j++) {
  result += "<td>" + array[j] + "</td>";
  if ((j + 1) % 5 == 0) {
    result += "</tr><tr>";
  }
}
result += "</tr>";
result += "</table>";

document.body.innerHTML = result;

Пожалуйста, попробуйте, если это сработает

01.05.2018 11:30

Как насчет того, чтобы попробовать что-то подобное? Пояснения в коде. Кроме того, не тестировалось, поэтому вам может потребоваться внести некоторые корректировки.

var array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// start the table
var table = document.createElement("table");
var currentRow;
for (var i = 0; i < array.length; i++) {
  // put items in.
  var item = document.createElement("td");
  item.innerHTML = array[i];
  // if we are at the 
  if (i % 5 === 0) {
    // if it's not the first time you're creating row - first put the prev row into the table, then reassign it to a new table row.
    if (typeof currentRow !== 'undefined') table.appendChild(currentRow);
  currentRow.appendChild(item);

    currentRow = document.createElement("tr");
  }

}
// put the table into the body element, for example.
document.getElementsByTagName('body')[0].appendChild(table);

(1 % 5 === 0) всегда будет ложным

— 01.05.2018 11:42

01.05.2018 11:33