Javascript Dynamically build HTML table with button cell

Question

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.
                    }
                }

What is cell? Without the html it's hard to tell, but possibly try: cell.parentElement.appendChild(removeRow) — acaputo
– acaputo, Commented Nov 19, 2018 at 22:19
That is strange, do it in one line, do a statment. cell.innerHTML="<td>"+data[i].userId ....+"<\td>". — NVRM
– NVRM, Commented Nov 19, 2018 at 22:22

Derek Pollard · Accepted Answer · 2018-11-19 22:41:43Z

3

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.

edited Nov 19, 2018 at 22:41

Derek Pollard

7,1856 gold badges45 silver badges62 bronze badges

answered Nov 19, 2018 at 22:16

JoerT

574 bronze badges

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

1 Comment

David Jones Over a year ago

I have corrected 3 to 4. Cell is derived for the row below var row = table.insertRow(-1); for (var i = 0; i < columnCount; i++) { var headerCell = document.createElement("TH"); headerCell.innerHTML = 'Header1'; row.appendChild(headerCell); }

Collectives™ on Stack Overflow

Javascript Dynamically build HTML table with button cell

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related