Javascript CreateElement 按钮

Question

我遇到了一个困扰了几个小时的问题。 上下文是，我需要在 JavaScript 中创建一个带有动作侦听器的按钮并将其添加到表格中。

这是我的代码

var _button = document.createElement("button");
_button.data = _a;
_button.innerHTML = 'click me';
_button.onclick = function()
{
    alert("hello, world");
}

var table = document.getElementById("tableOnline");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

var _weakbutton = _button.outerHTML;
_weakbutton.onclick = function()
{
    alert("hello, world");
}

cell1.innerHTML = "h";
cell2.innerHTML = "o";
cell3.innerHTML = _weakbutton;

如果我添加创建按钮并将其添加到主体上（没有弱按钮），代码可以工作，但我怎样才能让它在表格中工作？

亲切的问候， 真多斯。

编辑： 由于要求，这里是我们谈论的表格。

<div class = "container">
 <div class = "table">
  <thead id = "thead">
   <tr>
    <th> firstname <th>
    <th> lastname </th>
    <th> organisation </th>
   </tr>
  </thead>

  <tbody>

  </tbody>
 </table>
</div>

Answer 1

使用var _weakbutton = _button.cloneNode(true); 创建按钮的副本，而不是var _weakbutton = _button.outerHTML;。这将根据您原来的按钮创建一个新按钮。

因为现在是按钮节点，所以不能用cell3.innerHTML = _weakbutton;添加，必须用cell3.appendChild( _weakbutton );

所以，你的代码会是

var _button = document.createElement("button");
_button.data = "hi";
_button.innerHTML = 'click me';
_button.onclick = function()
{
    alert("hello, world");
}

var table = document.getElementById("tableOnline");
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

var _weakbutton = _button.cloneNode(true)
_weakbutton.onclick = function()
{
    alert("hello, world");
}

cell1.innerHTML = "h";
cell2.innerHTML = "o";
cell3.appendChild( _weakbutton );

<table id="tableOnline"></table>