1

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>
Improve this question
4
  • 1
    Please show the relevant (minimal reproducible example) HTML as well. Commented Feb 23, 2017 at 15:18
  • 4
    FYI: _weakbutton.onclick, doesn't set a click handler since _weakbutton is just a string variable. Commented Feb 23, 2017 at 15:18
  • If I add the onclick onto the button and make a weakButton, the onclick event is gone. 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 Commented Feb 23, 2017 at 15:24

1 Answer 1

Reset to default
4

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Exactly what I needed! Thank you very much.
@Zhendos glad to help please consider accepting this answer if it helped :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.