CODEWITHSUNDEEP
javascripthtmldom
David Jones
David Jones

Reputation: 83

Javascript Dynamically build HTML table with button cell

Trying to get my dynamic table to have a button in last column. Have had no luck. Any help much appreciated.

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

                //Add the data rows.
                for (var i = 1; i < data.length; i++) {
                    row = table.insertRow(-1);
                    for (var j = 0; j < 3; j++) {
                        var cell = row.insertCell(-1);
                        if (j==0) {
                        cell.innerHTML = data[i].userId}
                        if (j==1) {
                        cell.innerHTML = data[i].id}
                        if (j==2) {
                        cell.innerHTML = data[i].title}
                        if (j==3) {
                        cell.appendChild(removeRow)// Not working when replace data[i].field with button variable.
                    }
                }

Upvotes: 0

Views: 127

Answers (1)

JoerT
JoerT

Reputation: 57

In your loop, j never gets to 3 (it says j < 3 in your second for statement). If you change that to j < 4 or j <= 3 it should work.

Apart from that, you are only creating one BUTTON element, which you will be appending to all rows. Every time you append it to a row, it will be removed from the previous row it was on, so you'll still be left with just one button.

Upvotes: 3

Related Questions