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

Answer 2

您必须将新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() {
  tr = document.createElement('tr');
  table.appendChild(tr);
})

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

按钮的表生成器

2 个答案: