Adding button to dynamically generated HTML table

Question

I am trying to add a button for each row of the dynamically generated HTML table using JavaScript. Here is my code:

// helper function        
function addCell(tr, text) {
    var td = tr.insertCell();
    td.innerHTML = text;
    return td;
}

// insert data
list.forEach(function (item) {
    var row = table.insertRow();
    var button = document.createElement('button'); 
    var bText = document.createTextNode('View'); 
    button.appendChild(bText); 
    addCell(row, item.itemName);
    addCell(row, '$ ' + item.total.toFixed(2));
    addCell(row, button);
});

I managed to print out all other fields except the button. The column for the button just simply printed out this:

[object HTMLButtonElement]

Just wondering if there is anyway to add a image button to the dynamically generated table? Upon selecting the button, I wanted to get the value of the row and pass as parameter to another function as well.

Can u share fiddle or snippet?

Muhammet Can TONBUL
– Muhammet Can TONBUL

2017-12-14 06:09:03 +00:00
Commented Dec 14, 2017 at 6:09 — Muhammet Can TONBUL
– Muhammet Can TONBUL, Commented Dec 14, 2017 at 6:09

Muhammet Can TONBUL · Accepted Answer · 2017-12-14 06:51:34Z

1

Here the fiddle. What you want i dont know. This way you can reach the line.

var previousitem=null;
function removeRowbyItem(item) {
      item.parentElement.parentElement.style.backgroundColor="red";
      if(previousitem!=null){
         previousitem.style.backgroundColor="";
         console.log(previousitem);
      }
    previousitem=item.parentElement.parentElement;
}
removeRow.innerHTML = "click me";
removeRow.onclick = function() {
  removeRowbyItem(this);
};

edited Dec 14, 2017 at 6:51

answered Dec 14, 2017 at 6:22

Muhammet Can TONBUL

3,5585 gold badges27 silver badges39 bronze badges

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

3 Comments

QWERTY Over a year ago

Is there anyway to set the background color of selected row?

Muhammet Can TONBUL Over a year ago

Update my answer @hyperfkcb

QWERTY Over a year ago

Sorry but there is a slight problem because let's say the row is limited to single select. Is there anyway to clear the previous selected row before highlighting the new one?

Sreejesh K Nair · Accepted Answer · 2017-12-14 06:30:48Z

0

You can use td.appendChild(button);

function addCell(tr, text) {
    var td = tr.insertCell();
    td.innerHTML = text;
    return td;
}
//for append button
function addButtonToCell(tr, button) {
    var td = tr.insertCell();
    td.appendChild(button);
    return td;
}
// insert data
list.forEach(function (item) {
    var row = table.insertRow();
    var button = document.createElement('button'); 
    var bText = document.createTextNode('View'); 
    button.appendChild(bText); 
    addCell(row, item.itemName);
    addCell(row, '$ ' + item.total.toFixed(2));
    addButtonToCell(row, button);
});

answered Dec 14, 2017 at 6:30

Sreejesh K Nair

6011 gold badge7 silver badges16 bronze badges

Collectives™ on Stack Overflow

Adding button to dynamically generated HTML table

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related