主页 / 问题 / 1598003
Accepted
Aiden
Asked:2024-10-28 02:33:12 +0000 UTC2024-10-28 02:33:12 +0000 UTC

通过单击按钮，添加新行和新列

  • 772

您需要单击一个按钮来添加新列和新行，代码可以工作，但不完全。再次单击按钮时，行末尾的单元格不会添加，并且表格像梯子一样移动，我不明白缺少什么。

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>

javascript

1 个回答

  1. Best Answer

    您需要单击一个按钮来添加新列和新行

    我会建议这个解决方案来解决您的问题......

    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>

    • 1

相关问题