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
– JalalJaberi, Commented Mar 9, 2013 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
– Niet the Dark Absol, Commented Mar 9, 2013 at 20:11

Niet the Dark Absol · Accepted Answer · 2013-03-09 20:08:58Z

22

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 9, 2013 at 20:08

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

8 Comments

iCodeLikeImDrunk Over a year ago

damn, i always thought innerHTML doesnt render the um element. ill try these.\

iCodeLikeImDrunk Over a year ago

prefer the second method btw.

JalalJaberi Over a year ago

@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?

iCodeLikeImDrunk Over a year ago

question: what is that last (entry) for?

Niet the Dark Absol Over a year ago

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.

|

Miguel Alonso Mosquera · Accepted Answer · 2019-11-28 21:30:54Z

1

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>";

answered Nov 28, 2019 at 21:30

Miguel Alonso Mosquera

111 bronze badge

Collectives™ on Stack Overflow

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

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related