How do I add a button to a td using js?

Question

I have a table that is generated on the fly, as it is generating its TDs, I want to set the first TD to be a button. Below is my code, obviously doesn't work. I remember from another problem I had that we can change the content of a div using the .html(), but that doesnt work here neither.

Code:

    var table = document.getElementById("userinfo");
    var thead, tr, td;
    table.appendChild(thead = document.createElement("thead"));
    thead.appendChild(tr = document.createElement("tr"));
    tr.appendChild(td = document.createElement("td"));
    td.innerHTML = "Email";
    tr.appendChild(td = document.createElement("td"));
    td.innerHTML = "First Name";
    tr.appendChild(td = document.createElement("td"));
    td.innerHTML = "Last Name";
    tr.appendChild(td = document.createElement("td"));
    td.innerHTML = "Is Active?";

    for (var i in data)
    {
        tr = document.createElement("tr");
        tr.setAttribute("id", "row" + i);
        if (i%2 == 0)
        {
            tr.setAttribute("style", "background:white");
        }

        var entry = data[i];
        console.log(entry);
        table.appendChild(tr);
        tr.appendChild(td = document.createElement("td"));
        td.setAttribute("html", "<input type=\"button\" class=\"btn\" value=\'" + entry.email + "\" onclick=\"" + chooseUser(entry) + "\"/>");
        tr.appendChild(td = document.createElement("td"));
        td.innerHTML = entry.first_name;
        tr.appendChild(td = document.createElement("td"));
        td.innerHTML = entry.last_name;
        tr.appendChild(td = document.createElement("td"));
        td.innerHTML = entry.isActive;
    }

Do you have tried to use appendChild instead of innerHTML for td node? — JalalJaberi, Mar 09 '13 at 20:10
Small note: `appendChild` returns the appended node. For easier reading, you should do something like `td = tr.appendChild(document.createElement('td'))` - assignments in the middle of expressions are east to get confused by. — Niet the Dark Absol, Mar 09 '13 at 20:11

score 21 · Accepted Answer · answered Mar 09 '13 at 20:08

21

You can either use td.innerHTML = '<input type="button"...'; or you can do it the "proper" way:

var btn = document.createElement('input');
btn.type = "button";
btn.className = "btn";
btn.value = entry.email;
btn.onclick = (function(entry) {return function() {chooseUser(entry);}})(entry);
td.appendChild(btn);

answered Mar 09 '13 at 20:08

Niet the Dark Absol

320,036
81
464
592

damn, i always thought innerHTML doesnt render the um element. ill try these.\ – iCodeLikeImDrunk Mar 09 '13 at 20:10
1

prefer the second method btw. – iCodeLikeImDrunk Mar 09 '13 at 20:10
@Kolink: I have read before about innerHTML for td tag. It doesn't work in some cases if I am not wrong. I think it was about IE. Is it true? – JalalJaberi Mar 09 '13 at 20:12
question: what is that last (entry) for? – iCodeLikeImDrunk Mar 09 '13 at 20:12
That whole structure is to "anchor" the value of `entry`. Otherwise when you click the button it will always use the last value of `entry` after the loop ends. – Niet the Dark Absol Mar 09 '13 at 20:15
@JalalJaberi You cannot use `innerHTML` on any of table, thead, tbody, tfoot or tr, but with td it goes back to being a normal container. – Niet the Dark Absol Mar 09 '13 at 20:16
@Niet the Dark Absol could you have a look at my post here: [link](https://stackoverflow.com/questions/44226334/how-to-append-a-button-with-onclick-event-that-fires-a-function-to-a-table-cell/44226364?noredirect=1#comment75462866_44226364). I have similar problem. I need to call a function that takes the loop index and another value that depends on the loop iteration. I want the function to be fired when click. Could not do this. Always get the last index of the loop iteration. – user7945230 May 28 '17 at 10:55
@NiettheDarkAbsol And how can I use this without this context? Like, to say that I want to insert a button and render it with a specific id (if that even is the correct way of doing it)? – Dan Nov 21 '18 at 19:38

score 1 · Answer 2 · answered Nov 28 '19 at 21:30

This works for me.

 var row = {};
     var myTable = document.querySelector("table#tableProducts>tbody");

     row = myTable.insertRow();

     row.insertCell(-1).textContent = "dummy";
     var lastRow = row;
     var lastCell = lastRow.cells[lastRow.cells.length - 1];
     lastCell.innerHTML = "<button id='btnEdit';>Editar</button>";

How do I add a button to a td using js?

2 Answers2

Linked