Как реализовать добавление и удаление полей таблицы?

Question

[danysm0d]

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

Answer 1

[0xD34F]

<input type="number" min="0" max="100">
<table>
  <tbody></tbody>
</table>

const input = document.querySelector('input');
const table = document.querySelector('table');

input.addEventListener('input', ({ target: t }) => {
  const count = t.value = Math.max(0, t.value | 0);
  const [ tbody ] = table.tBodies;
  const { rows } = tbody;

  for (; rows.length > count; tbody.deleteRow(-1)) ;

  while (rows.length < count) {
    const row = tbody.insertRow();
    row.insertCell().textContent = '#' + rows.length;
    row.insertCell().textContent = Math.random() * 1e3 | 0;
  }
});

// или

input.oninput = function() {
  const count = this.value = Math.max(0, +this.value || 0);
  const tbody = table.querySelector('tbody');
  const rows = tbody.children;

  Array.prototype.slice.call(rows, Math.min(rows.length, count)).forEach(n => n.remove());

  tbody.insertAdjacentHTML('beforeend', Array
    .from({ length: Math.max(0, count - rows.length) }, (n, i) => `
      <tr>
        <td>#${rows.length + i + 1}</td>
        <td>${Math.floor(Math.random() * 1000)}</td>
      </tr>`)
    .join('')
  );
};