Add button to dynamic html table javascript

Question

I'm new to dynamic javascript and I'm adding a button to my dynamic HTML table.

function addToTable(){

    var table = document.getElementById("table");
    var row = table.insertRow(counter + 1);

    var removeRow=document.createElement("BUTTON");

    var cell0 = row.insertCell(0)
    var cell1 = row.insertCell(1);
    var cell2 = row.insertCell(2);
    var cell3 = row.insertCell(3);

    cell0.innerHTML = counter + 1;
    cell1.innerHTML = getName(array[counter]); 
    cell2.innerHTML = getEmail(array[counter]);
    cell3.innerHTML = document.body.appendChild(removeRow);

    counter++;
}

Whenever I run this, in the first the cells I get the index number, the name, and the email. in the 4th cell it prints "[object HTMLButtonElement]".

And an addition issue is when I assign a label on the button the entire method doesn't work. This is how I was adding a label.

var removeRow=document.createElement("BUTTON");
var text=document.createTextNode("Remove");
btn.appendChild(text);
document.body.appendChild(removeRow);

Regarding this line: document.getElementById("table"); do you really have an element with id="table" in your HTML? — blurfus
– blurfus, Commented Jul 25, 2014 at 23:43
He probably does, because in his question he states that something other than what he expected is showing up inside the table — itdoesntwork
– itdoesntwork, Commented Jul 25, 2014 at 23:43

itdoesntwork · Accepted Answer · 2014-07-25 23:39:24Z

1

You shouldn't be setting the innerHTML of the cell to the return value of document.appendChild this returns an DOM object which is turned into a string when set as HTML. You should simply append the button to the cell.

cell3.appendChild( removeRow );

fiddle

Note: as I did in the fiddle, you should set the innerHTML of the created button.

answered Jul 25, 2014 at 23:39

itdoesntwork

4,8323 gold badges28 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Add button to dynamic html table javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related