Create a bootstrap button inside cell columns of a table with jquery

Question

i want to put this button

<button class="btn btn-primary btn-fab btn-icon btn-round">

Inside the column called "Details"

But i dont know how, this is my code

var tableRef = document.getElementById('ticker_table').getElementsByTagName('tbody')[0];
    var tickerArray = [];

    for (i = 0; i < 10; i++) {
        var newRow = tableRef.insertRow();
        newRow.insertCell(0).appendChild(document.createTextNode(data[i]["ticker"]));
        newRow.insertCell(1).appendChild(document.createTextNode(data[i]["fund"]));
        newRow.insertCell(2).appendChild(document.createTextNode(data[i]["index_tracked"]));
        newRow.insertCell(3).appendChild(document.createTextNode(data[i]["assetclass"]));
     }

I'm assuming you want to repeat btn in each row. you can try using innerhtml. newRow.insertCell(4).innerHTML = " — Amar Gadekar, Oct 23 '19 at 14:31
Wow, it was more simple that i thought, thanks!! you saved my life — DeathInWhite, Oct 23 '19 at 15:04

score 1 · Accepted Answer · answered Oct 23 '19 at 14:34

Rather than creating a text note, you could use the insertAdjacentHTML to add data before the end :

var tableRef = document.getElementById('ticker_table').getElementsByTagName('tbody')[0];
var tickerArray = [];

for (i = 0; i < 10; i++) {
    var newRow = tableRef.insertRow();  newRow.insertCell(0).appendChild(document.createTextNode(data[i]["ticker"]));
    newRow.insertCell(1).appendChild(document.createTextNode(data[i]["fund"]));
    newRow.insertCell(2).appendChild(document.createTextNode(data[i]["index_tracked"]));
    newRow.insertCell(3).appendChild(document.createTextNode(data[i]["assetclass"]));
    newRow.insertCell(4).insertAdjacentHTML('beforeend', '<button class="btn btn-primary btn-fab btn-icon btn-round">');
 }

Please refer to this answer for more informations about the insertAdjacentHTML function

Create a bootstrap button inside cell columns of a table with jquery

1 Answers1