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>

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>

• javascript
• button
• createelement

Share Improve this question Follow edited Feb 23, 2017 at 15:25 asked Feb 23, 2017 at 15:15 user5430996user5430996 4

• 1 Please show the relevant (minimal reproducible example) HTML as well. – David Thomas Commented Feb 23, 2017 at 15:18
• 4 FYI: _weakbutton.onclick, doesn't set a click handler since _weakbutton is just a string variable. – Patrick Evans Commented Feb 23, 2017 at 15:18
• If I add the onclick onto the button and make a weakButton, the onclick event is gone. – user5430996 Commented Feb 23, 2017 at 15:19
• Also table.insertRow(1); will only work if there is already row(s) inside the table, the optional argument is the index where you want the new row. The argument cannot be greater than the number of currently existing rows. Check your console for errors – Patrick Evans Commented Feb 23, 2017 at 15:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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>