Reputation:
I have a problem I been suffering on for a couple hours now. The context is, I need to make a button with action listener in JavaScript and add it into a table.
Here is the code I have
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;
The code works if I add the create the button and add it onto the body (without weakButton), but how can I make it work into a table?
Kind regards, Zhendos.
EDIT: Because requested, here is the table we talk about.
<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>
Upvotes: 1
Views: 24171
Reputation: 4691
Instead of var _weakbutton = _button.outerHTML;
create a copy of the button with var _weakbutton = _button.cloneNode(true);
. This will create a new button, based on your original one.
Because this is now a button node, you can't add it with cell3.innerHTML = _weakbutton;
but have to use cell3.appendChild( _weakbutton );
So, with your code it would be
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>
Upvotes: 2