Как вывести массив в таблицу HTML?

Question

Есть небольшая программа, реализующая вычислительный конвейер. То есть сравниваются два массива на вхождение: если первый входит во второй, то из него берутся все значения и помещаются во второй, иначе второй сдвигается влево на один символ. И так движется до бесконечности, в моем случае 10 повторений.

Как сделать так, чтобы после каждой итерации новый массив значений выводился в новую таблицу? То есть должно получиться 10 таблиц с массивами в окне браузера.

JS:

let array = [
    [1,0,0,1,0,0,0,1],
    [0,0,1,0,0,1,1,0],
    [0,1,0,0,1,0,0,0]
];
let arrayTwo = [
    [1,0,0,1,0,0,0,1],
    [0,0,1,0,0,1,1,0],
    [0,1,0,0,1,0,0,0]
];

let sum = 0;
let x = 0;
let y = 0;
while (x < 10){
    console.log(JSON.stringify(arrayTwo));
    for (let j = 0; j < array.length; j++) {
        for (let i = 0; i < 8; i++)
            if ((array[j][i] == 1 && arrayTwo[j][i] == 0) || (array[j][i] == 0 && arrayTwo[j][i] == 1) || (array[j][i] == 0 && arrayTwo[j][i] == 0))
                sum = sum + 1;
        if (sum != 8 )
            y = y + 1;
        sum = 0;
    }

    if (y > 0) 
        for (let j = 0; j < array.length; j++) {
            arrayTwo[j].shift();
            arrayTwo[j].push(0);
        }
    else
        for (let j = 0; j < array.length; j++) 
            for (let i = 0; i < 8; i++)
                    if (array[j][i] == 1 && arrayTwo[j][i] == 0)
                        arrayTwo[j][i] = 1;
    y = 0;
    x = x +1;
}

console.dir(JSON.stringify(arrayTwo));

HTML:

<table id="table" border="1">
        <tr>
            <td></td>
            <td>0</td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
        </tr>
        <tr>
            <td>0</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>1</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>2</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
      </table>

Answer 1

Не вникая в логику расчётов, могу предложить такую функцию, принимающую двухмерный массив и возвращающую HTML таблицы, который потом можно вставить в нужное место через Element.insertAdjacentHTML() (можете нажать на кнопку «Выполнить код» и посмотреть результат):

const array = [
  [1, 0, 0, 1, 0, 0, 0, 1],
  [0, 0, 1, 0, 0, 1, 1, 0],
  [0, 1, 0, 0, 1, 0, 0, 0],
];

const arrayTwo = [
  [1, 0, 0, 1, 0, 0, 0, 1],
  [0, 0, 1, 0, 0, 1, 1, 0],
  [0, 1, 0, 0, 1, 0, 0, 0],
];

function arraysToTableHTML(arrays, id) {
  const rows = arrays.reduce(
    (html, row) => `${html}<tr>${row.map(number => `<td>${number}</td>`).join('')}</tr>\n`,
    '',
  );
  return `<table border="1" id="${id}"><tbody>\n${rows}</tbody></table>\n`;
}

document.body.insertAdjacentHTML('beforeend', arraysToTableHTML(array, 'table1'));
document.body.insertAdjacentHTML('beforeend', arraysToTableHTML(arrayTwo, 'table2'));

Если нужно работать не с HTML, а сразу с элементом таблицы (например, так будет безопаснее, если текст таблицы приходит извне и его опасно делать частью HTML), можно так:

const array = [
  [1, 0, 0, 1, 0, 0, 0, 1],
  [0, 0, 1, 0, 0, 1, 1, 0],
  [0, 1, 0, 0, 1, 0, 0, 0],
];

const arrayTwo = [
  [1, 0, 0, 1, 0, 0, 0, 1],
  [0, 0, 1, 0, 0, 1, 1, 0],
  [0, 1, 0, 0, 1, 0, 0, 0],
];

function arraysToTable(arrays, id) {
  const table = document.createElement('table');
  table.id = id;
  table.setAttribute('border', '1');
  for (const row of arrays) {
    const tr = table.insertRow();
    for (const number of row) {
      const td = tr.insertCell();
      td.textContent = number;
    }
  }
  return table;
}

document.body.append(arraysToTable(array, 'table1'));
document.body.append(arraysToTable(arrayTwo, 'table2'));

Answer 2

Предложу такое решение:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <style>
        table {border-collapse: collapse; margin-bottom: 15px;}
        td {width: 25px; height: 25px; text-align: center; border: 1px solid #000;}
    </style>
</head>
<body>

<div id="tables-container"></div>

<script>
let array = [
    [1,0,0,1,0,0,0,1],
    [0,0,1,0,0,1,1,0],
    [0,1,0,0,1,0,0,0]
];
let arrayTwo = [
    [1,0,0,1,0,0,0,1],
    [0,0,1,0,0,1,1,0],
    [0,1,0,0,1,0,0,0]
];

function renderTable(arr, iteration) {
    let container = document.getElementById('tables-container');
    let table = document.createElement('table');
    let caption = document.createElement('caption');
    caption.textContent = 'Итерация ' + iteration;
    table.appendChild(caption);

    for (let j = 0; j < arr.length; j++) {
        let row = document.createElement('tr');
        for (let i = 0; i < arr[j].length; i++) {
            let cell = document.createElement('td');
            cell.textContent = arr[j][i];
            row.appendChild(cell);
        }
        table.appendChild(row);
    }

    container.appendChild(table);
}

let sum = 0;
let x = 0;
let y = 0;

while (x < 10){
    renderTable(arrayTwo, x+1);

    for (let j = 0; j < array.length; j++) {
        for (let i = 0; i < 8; i++)
            if ((array[j][i] == 1 && arrayTwo[j][i] == 0) || (array[j][i] == 0 && arrayTwo[j][i] == 1) || (array[j][i] == 0 && arrayTwo[j][i] == 0))
                sum = sum + 1;
        if (sum != 8 )
            y = y + 1;
        sum = 0;
    }

    if (y > 0) {
        for (let j = 0; j < array.length; j++) {
            arrayTwo[j].shift();
            arrayTwo[j].push(0);
        }
    } else {
        for (let j = 0; j < array.length; j++) {
            for (let i = 0; i < 8; i++) {
                if (array[j][i] == 1 && arrayTwo[j][i] == 0)
                    arrayTwo[j][i] = 1;
            }
        }
    }

    y = 0;
    x++;
}

</script>
</body>
</html>

БЛОГ НА HUSL

Как вывести массив в таблицу HTML?

Ответы (2 шт):