По нажатию на кнопку добавить новую строку и новый столбец

Question

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

let table = document.getElementById('table');
let button = document.getElementById('button');

for (let i = 1; i <= 2; i++) {
  let tr = document.createElement('tr');
  for (let j = 1; j <= 2; j++) {
    let td = document.createElement('td');
    td.textContent = j;
    tr.append(td)
  }
  table.append(tr)
}

button.addEventListener('click', function() {
  let tr = document.createElement('tr');
  for (let i = 1; i <= 2; i++) {
    let td = document.createElement('td');
    td.textContent = i;
    tr.append(td);

  }
  table.append(tr)

  let trs = document.querySelectorAll('#table tr');
  for (let tr of trs) {
    let td = document.createElement('td');
    td.textContent = 'new';
    tr.appendChild(td);
  }
})

<table id="table"></table>
<button id="button">click me</button>

Answer 1

Нужно по нажатию на кнопку добавлять новый столбец и новую строку

Предложу вот такой вариант решения твоей задачи...

const table = document.getElementById('table');
const button = document.getElementById('button');

button.addEventListener('click', _ => {
  const tr = table.querySelector('tr:last-child').cloneNode(true);
  const td = document.createElement('td');
  td.textContent = tr.querySelectorAll('td').length + 1;
  tr.append(td);
  table.append(tr);

  table.querySelectorAll('tr').forEach((o, i, a) => {
    if (i === a.length - 1) return
    const td = document.createElement('td');
    td.textContent = 'new';
    o.append(td);
  });
})

for (let i = 1; i <= 2; i++) {
  let tr = document.createElement('tr');
  for (let j = 1; j <= 2; j++) {
    let td = document.createElement('td');
    td.textContent = j;
    tr.append(td)
  }
  table.append(tr)
}

<button id="button">click me</button>
<table id="table" border='1'></table>

БЛОГ НА HUSL

По нажатию на кнопку добавить новую строку и новый столбец

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