使用 jquery 在表格的单元格列中创建引导按钮答案

【问题标题】：Create a bootstrap button inside cell columns of a table with jquery使用 jquery 在表格的单元格列中创建引导按钮
【发布时间】：2019-10-23 14:22:01
【问题描述】：

我想放这个按钮

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

在名为“详细信息”的列内

但我不知道怎么做，这是我的代码

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"]));
     }

【问题讨论】：

我假设您想在每一行中重复 btn。你可以尝试使用innerhtml。 newRow.insertCell(4).innerHTML = "
哇，我想的更简单，谢谢！！你救了我的命

标签： javascript jquery html button bootstrap-4

【解决方案1】：

您可以使用insertAdjacentHTML 在末尾添加数据，而不是创建文本注释：

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">');
 }

有关insertAdjacentHTML功能的更多信息，请参考this answer

【讨论】：