javascript - 通过按钮生成表格

Question

我有一张只有一个 td 的表，并且有两个按钮，一个创建另一个 td。 问题是，当我创建 tr 时，下一个 td 不会插入上次创建的 tr。

var table = document.createElement('table');
document.body.appendChild(table)

var tr = document.createElement('tr');
table.appendChild(tr);

var td = document.createElement('td');
tr.appendChild(td);

var createTd = document.createElement('button');
createTd.innerHTML = 'Create td';
document.body.appendChild(createTd);

var createTr = document.createElement('button');
createTr.innerHTML = 'Create tr';
document.body.appendChild(createTr);

createTd.addEventListener('click', function() {
  var td = document.createElement('td');
  tr.appendChild(td);
})

createTr.addEventListener('click', function() {
  var tr = document.createElement('tr');
  table.appendChild(tr);
})

td,
tr {
  border: 1px solid black;
  padding: 10px;
}

您可以在这里尝试演示:Demo

Answer 1

问题是您创建的 tr 是本地的，并且您添加到全局 tr 中。只需从内部 tr 中删除 var，如下所示:

createTr.addEventListener('click',function() {
   tr = document.createElement('tr');
  table.appendChild(tr);
})

这是一个工作 demo